/* nexus_v3 디자인 토큰 — vendor 0개. 타입 스케일 7단 고정. 버튼 2종. */
:root{
  --bg:#f4f6f6; --fg:#16201f; --mut:#67736f; --card:#fff; --line:#dde5e2;
  --acc:#0f766e; --acc-soft:#e4f2ef; --acc-fg:#fff;
  --ok:#15803d; --warn:#b45309; --bad:#b91c1c;
  --term-bg:#121a19; --term-fg:#d7e3e0; --term-line:#121a19; --term-edge:#121a19;
  --backdrop:rgba(10,20,18,.45);
  /* 고정폭 글꼴 — **윈도우 것을 앞에 둔다.** 한국어 윈도우의 기본 고정폭
     (굴림 계열)은 역슬래시를 `₩` 로 그린다. 경로가 `C:₩works₩…` 로 보여
     사람이 "경로가 왜 저러지" 를 하게 된다(실측: 실기 화면 캡처에서 봤다).
     Consolas·Cascadia 는 윈도우에 늘 있고 `\` 를 제대로 그린다. */
  --mono:Consolas,"Cascadia Mono","Segoe UI Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:8px; --gap:12px;
  /* 타입 스케일 — 이 7개 외의 값을 쓰지 않는다 */
  --t-h1:20px; --t-stat:18px; --t-h2:15px; --t-body:14px; --t-mono:13px; --t-label:12px; --t-badge:11px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1413; --fg:#e3eae8; --mut:#93a09c; --card:#161f1e; --line:#263230;
  --acc:#2dd4bf; --acc-soft:#14302c; --acc-fg:#06201c;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --term-bg:#0a100f; --term-fg:#cfdedb; --term-line:#283634; --backdrop:rgba(0,0,0,.6);
  --term-edge:#3d504c;   /* 바탕과 터미널이 둘 다 어두워 경계가 묻힌다 — 테두리를 밝힌다 */
}}
:root[data-theme="dark"]{
  --bg:#0e1413; --fg:#e3eae8; --mut:#93a09c; --card:#161f1e; --line:#263230;
  --acc:#2dd4bf; --acc-soft:#14302c; --acc-fg:#06201c;
  --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --term-bg:#0a100f; --term-fg:#cfdedb; --term-line:#283634; --backdrop:rgba(0,0,0,.6);
  --term-edge:#3d504c;   /* 바탕과 터미널이 둘 다 어두워 경계가 묻힌다 — 테두리를 밝힌다 */
}
*{box-sizing:border-box}

/* ── 스크롤바 (perfect-scrollbar 느낌: 얇고 둥글고 hover 때만 또렷) ── */
:root{--sb:rgba(103,115,111,.28); --sb-h:rgba(103,115,111,.55); --sb-w:9px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sb:rgba(147,160,156,.26);--sb-h:rgba(147,160,156,.5)}}
:root[data-theme="dark"]{--sb:rgba(147,160,156,.26);--sb-h:rgba(147,160,156,.5)}
*{scrollbar-width:thin;scrollbar-color:var(--sb) transparent}
*::-webkit-scrollbar{width:var(--sb-w);height:var(--sb-w)}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--sb);border-radius:99px;
  border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--sb-h);background-clip:content-box}
*::-webkit-scrollbar-corner{background:transparent}
.term::-webkit-scrollbar-thumb{background:rgba(215,227,224,.22);background-clip:content-box}
.term::-webkit-scrollbar-thumb:hover{background:rgba(215,227,224,.45);background-clip:content-box}
.term{scrollbar-color:rgba(215,227,224,.3) transparent}
body{margin:0;background:var(--bg);color:var(--fg);
  font:var(--t-body)/1.5 -apple-system,"Segoe UI","Noto Sans KR",sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:var(--t-h1);margin:0}
h2{font-size:var(--t-h2);margin:0 0 10px}
.mono{font-family:var(--mono);font-size:var(--t-mono)}
/* `display:` 를 가진 클래스는 UA 의 [hidden] 을 **이긴다**. 실제로 편집기의
   찾기 막대와 탭(.seg/.ed 는 flex/grid)이 숨겨지지 않고 그대로 보였다. */
[hidden]{display:none!important}
.mut{color:var(--mut)}.ok{color:var(--ok)}.warn{color:var(--warn)}.bad{color:var(--bad)}
.label{font-size:var(--t-label);color:var(--mut)}
/* mermaid 도 글자칸에 class="label" 을 쓴다(그릴 때 body 밑 임시 칸에서 잰다) — 앱의 작은 글씨가 그림에 걸리면 인쇄 틀(앱 CSS 없음)에서 글이 상자를 넘친다 */
svg .label{font-size:inherit;color:inherit}

/* ── 레이아웃: 좌측 메뉴 + 본문 ───────────────────────── */
.shell{display:flex;min-height:100vh}
.side{width:210px;flex:none;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{display:flex;align-items:center;gap:8px;padding:12px 14px;
  border-bottom:1px solid var(--line);color:var(--fg);text-decoration:none}
/* 로고가 홈이다 — 좌측 메뉴에 '대시보드' 항목을 따로 두지 않는다 */
a.brand{cursor:pointer}
a.brand:hover{background:var(--acc-soft)}
a.brand.on{background:var(--acc-soft);box-shadow:inset 3px 0 0 var(--acc)}
.dr-head a.brand{text-decoration:none;color:var(--fg);display:flex;
  align-items:center;gap:7px;padding:4px 6px;border-radius:6px;min-height:36px}
.side .brand b{font-size:var(--t-h2)}
.side nav{padding:8px;display:flex;flex-direction:column;gap:1px;overflow-y:auto}
.side nav a{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;color:var(--fg)}
.side nav a:hover{background:var(--bg);text-decoration:none}
.side nav a.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
.side nav .sep{height:1px;background:var(--line);margin:7px 4px}
.side nav .cap{font-size:var(--t-label);color:var(--mut);padding:6px 10px 2px}
/* 두 줄은 그대로 두고, 톱니는 **그 두 줄의 가운데 오른쪽**에 붙인다 */
.side .foot{margin-top:auto;padding:10px 14px;border-top:1px solid var(--line);
  font-size:var(--t-label);color:var(--mut);
  display:flex;align-items:center;gap:8px}
.side .foot .foot-t,dialog.drawer .dr-foot .foot-t{flex:1;min-width:0}
.side .foot-gear,dialog.drawer .foot-gear{flex:0 0 auto;display:inline-flex;align-items:center;
  justify-content:center;width:32px;height:32px;border-radius:7px;
  color:var(--mut);border:1px solid transparent}
.side .foot-gear:hover,dialog.drawer .foot-gear:hover{background:var(--acc-soft);color:var(--acc);
  border-color:var(--line);text-decoration:none}
.side .foot-gear.on,dialog.drawer .foot-gear.on{background:var(--acc-soft);color:var(--acc);border-color:var(--acc)}

/* 기능목록 표 */
.feat-table td{vertical-align:top}
.feat-table .badge{white-space:nowrap}
@media (max-width:760px){.side .foot-gear,dialog.drawer .foot-gear{width:38px;height:38px}}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--card);
  border-bottom:1px solid var(--line);border-top:3px solid var(--acc);position:sticky;top:0;z-index:5}
.top .sp{margin-left:auto}
.ham{display:none;padding:3px 9px;font-size:var(--t-h2);line-height:1}
/* 모바일 서랍 — 좌측에서 밀려 나오는 오버레이 */
dialog.drawer{position:fixed;inset:0 auto 0 0;margin:0;height:100dvh;width:min(290px,84vw);
  max-width:none;max-height:none;padding:0;border:0;border-right:1px solid var(--line);
  background:var(--card);color:var(--fg);display:none;flex-direction:column}
dialog.drawer[open]{display:flex;animation:dr-in .16s ease-out}
@keyframes dr-in{from{transform:translateX(-14px);opacity:.6}to{transform:none;opacity:1}}
dialog.drawer .dr-head{display:flex;align-items:center;gap:8px;padding:10px 10px 10px 14px;
  border-bottom:1px solid var(--line)}
/* 닫기는 손가락이 닿는 크기로. 바깥을 눌러도 닫히지만 명시 버튼도 둔다. */
.dr-x{width:40px;height:40px;padding:0;font-size:var(--t-h2);line-height:1;
  display:flex;align-items:center;justify-content:center}
dialog.drawer nav{padding:8px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1}
dialog.drawer nav a{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:6px;color:var(--fg)}
dialog.drawer nav a:hover{background:var(--bg);text-decoration:none}
dialog.drawer nav a.on{background:var(--acc-soft);color:var(--acc);font-weight:600}
dialog.drawer nav .sep{height:1px;background:var(--line);margin:7px 4px}
dialog.drawer nav .cap{font-size:var(--t-label);color:var(--mut);padding:6px 11px 2px}
dialog.drawer .dr-foot{padding:10px 14px;border-top:1px solid var(--line);
  font-size:var(--t-label);color:var(--mut);display:flex;align-items:center;gap:8px}
.wrap{padding:14px 16px;width:100%}
.page-h{margin:0 0 14px}
.page-h p{margin:3px 0 0;color:var(--mut);font-size:var(--t-mono)}

/* ── 공통 부품 ───────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:var(--gap);overflow-x:auto}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
button,.btn{font:inherit;cursor:pointer;border-radius:6px;padding:5px 10px;
  background:var(--acc);color:var(--acc-fg);border:1px solid var(--acc);
  white-space:nowrap}            /* 글자가 세로로 쪼개지지 않게 — 모바일 깨짐의 주범 */
button.sec,.btn.sec{background:var(--card);color:var(--fg);border-color:var(--line)}
button:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{font:inherit;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:6px;padding:5px 8px}
.badge{display:inline-block;font-size:var(--t-badge);font-weight:600;padding:1px 7px;border-radius:10px;
  background:var(--acc-soft);color:var(--acc);vertical-align:middle}
.badge.g{background:var(--line);color:var(--mut)}
.badge.warn{background:transparent;border:1px solid var(--warn);color:var(--warn)}
.badge.out{background:transparent;border:1px solid var(--acc);color:var(--acc)}
/* 심각도 — 색이 뜻을 가져야 한다. 셋이 같은 색이면 배지가 없는 것과 같다. */
.badge.sev{min-width:38px;text-align:center;font-variant:none}
.badge.sev.high{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad);
  border:1px solid color-mix(in srgb,var(--bad) 42%,transparent)}
.badge.sev.med{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn);
  border:1px solid color-mix(in srgb,var(--warn) 42%,transparent)}
.badge.sev.low{background:transparent;color:var(--mut);border:1px solid var(--line)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.run{background:var(--ok)}.dot.idle{background:var(--warn)}.dot.off{background:var(--line)}
/* 답을 기다림 — 사람이 봐야 하는 자리라 깜박인다 */
.dot.ask{background:var(--bad);animation:dot-ask 1.2s ease-in-out infinite}
/* 옆 목록 — 점 둘레에 프로젝트 테마색 테두리. 띄우지 않고 바짝 붙인다(사람이 정함 2026-11-04) */
.pitem .dot[style*="--pc"]{box-shadow:0 0 0 2px var(--pc);margin:0 2px}
@keyframes dot-ask{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.dot.ask{animation:none}}
.badge.ask{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.label.ask{color:var(--bad);font-weight:600}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:var(--t-label);color:var(--mut);font-weight:500}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── 태그 칩 ─────────────────────────────────────────── */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--gap)}
.chip{font-size:var(--t-label);padding:3px 10px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--fg);cursor:pointer;white-space:nowrap}
.chip:hover{text-decoration:none;border-color:var(--acc)}
.chip.on{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}
.chip .n{opacity:.65;margin-left:4px;font-variant-numeric:tabular-nums}
.chip:not(.on){box-shadow:inset 3px 0 0 var(--c,var(--line))}
.chip.on{background:var(--c,var(--acc));border-color:var(--c,var(--acc));color:#fff;box-shadow:none}
/* 태그 관리 */
.swatches{display:flex;gap:6px;flex-wrap:wrap}
.swatch{width:24px;height:24px;border-radius:6px;border:2px solid transparent;cursor:pointer;
  display:inline-block;position:relative}
.swatch input{position:absolute;opacity:0;inset:0;cursor:pointer}
.swatch:has(input:checked){border-color:var(--fg);box-shadow:0 0 0 2px var(--card) inset}
.tagrow{display:grid;grid-template-columns:120px 44px 1fr;gap:8px;align-items:center;
  padding:7px 0;border-bottom:1px solid var(--line)}
.tagrow:last-child{border-bottom:0}
.tagrow .nm{font-weight:600}
.tagdot{width:14px;height:14px;border-radius:4px;display:inline-block;vertical-align:-2px;margin-right:6px}

/* ── 프로젝트 카드 ───────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap)}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;position:relative;transition:border-color .12s,box-shadow .12s}
.pcard:hover{border-color:var(--pc,var(--acc));box-shadow:0 2px 10px rgba(0,0,0,.07)}
/* 카드 전체가 '열기' 링크다. 텍스트 위를 덮되 ⧉ 버튼보다는 아래. */
.pcard .stretch{position:absolute;inset:0;z-index:1}
.pcard .pop{position:absolute;top:8px;right:8px;z-index:2;width:24px;height:24px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:var(--t-label);
  color:var(--mut);border:1px solid transparent;background:transparent;line-height:1}
.pcard .pop:hover{color:var(--acc);border-color:var(--line);background:var(--bg);text-decoration:none}
.pcard .bar{height:3px;background:var(--pc,var(--acc))}
.pcard .bd{padding:11px 13px 13px;display:flex;flex-direction:column;gap:7px;flex:1;
  position:relative;pointer-events:none}   /* z-index 를 주지 않는다 — 주면 안쪽 🐕 태그가 덮개(.stretch) 위로 못 올라온다 */
.pcard .nm{display:flex;align-items:center;gap:7px;font-weight:600;font-size:var(--t-h2);
  padding-right:26px}
.pcard .pt{font-size:var(--t-mono);color:var(--mut);word-break:break-all}
.pcard .st{display:flex;gap:12px;flex-wrap:wrap;font-size:var(--t-label);color:var(--mut);margin-top:auto}
.pcard .st b{margin-left:4px}
.pcard .st b{color:var(--fg);font-weight:600}
.pcard.new{align-items:center;justify-content:center;border-style:dashed;color:var(--mut);
  min-height:150px;cursor:pointer}
.pcard.new:hover{border-color:var(--acc);color:var(--acc)}

/* ── CLI 격자 ────────────────────────────────────────── */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column}
.cell .hd{display:flex;align-items:center;gap:8px;padding:7px 11px;border-bottom:1px solid var(--line);
  border-left:3px solid var(--pc,var(--acc))}
.cell .hd .nm{font-weight:600}
/* 모아보기 칸 머리의 처리 중 · 명령 대기 · 답을 기다림 */
.cell .hd .work{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:999px;
  font-size:var(--t-label);font-weight:600;white-space:nowrap;border:1px solid var(--line)}
.cell .hd .work .spin{display:none;--spin-size:10px;--spin-bg:rgba(120,140,136,.35);--spin-c:var(--ok, #0f766e)}
.cell .hd .work.w-busy{color:var(--ok, #0f766e);border-color:currentColor}
.cell .hd .work.w-busy .spin{display:inline-block}
.cell .hd .work.w-idle{color:var(--mut)}
.cell .hd .work.w-ask{color:#b91c1c;border-color:currentColor}
.cell .hd .pt{font-size:var(--t-label);color:var(--mut);margin-left:auto;word-break:break-all}
.term{background:var(--term-bg);color:var(--term-fg);border:1px solid var(--term-line);
  font-family:var(--term-ff,var(--mono));
  font-size:var(--term-fs,var(--t-mono));line-height:1.45;padding:9px 11px;white-space:pre-wrap;word-break:break-word;
  overflow:auto;margin:0}
.cell .term{height:clamp(180px,26vh,320px);border-left:0;border-right:0}
.cell .ft{display:flex;gap:6px;padding:8px 11px;border-top:1px solid var(--line)}
.cell .ft{align-items:stretch}
.cell .ft .inwrap{flex:1;min-width:0;position:relative;display:flex}
.cell .ft .inwrap input{flex:1;width:100%;min-width:0}
.cell .ft .say{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 14px;font-size:var(--t-mono)}

/* ── 프로젝트 화면 ───────────────────────────────────── */
.pbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 13px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--pc,var(--acc));border-radius:var(--r);margin-bottom:var(--gap)}
.pbar .nm{font-size:var(--t-h2);font-weight:600}
.pbar .sp{margin-left:auto}
.termbox{background:var(--term-bg);border-radius:var(--r) var(--r) 0 0;overflow:hidden}
.termbox .term{border:0;border-bottom:1px solid var(--term-line)}
.termbox .term{height:var(--term-h,clamp(260px,42vh,620px))}
/* 하단 콘솔 — 키패널 / 긴 입력창 / 첨부를 행으로 분리 */
.console{background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r) var(--r);margin-bottom:var(--gap)}
.console .krow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:8px 10px;
  border-bottom:1px solid var(--line)}
.console .krow button{min-width:0;padding:3px 9px;font-size:var(--t-label);line-height:1.6}
.console .krow .sp{flex:1}
.console .irow{display:flex;gap:8px;padding:10px}
.console .inpwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.console .meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.console .meta .gauge{flex:none}
.grp{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.console .meta .sp{flex:1}
.pbar button,.pbar .btn,.pbar select{padding:3px 9px;font-size:var(--t-label)}
/* 메시지 입력칸은 **바로 위 터미널과 같은 바탕**이다. 거기 친 글이 그대로
   저 화면으로 들어가므로, 색이 다르면 다른 곳에 쓰는 것처럼 보인다. */
.console .inp{flex:1;min-width:0;resize:vertical;min-height:62px;line-height:1.5;
  font-family:var(--mono);font-size:var(--t-mono);
  background:var(--term-bg);color:var(--term-fg);border-color:var(--term-line);
  caret-color:var(--term-fg)}
.console .inp::placeholder{color:var(--term-fg);opacity:.42}
.console .inp:focus{border-color:var(--acc);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 35%,transparent)}
.console .ibtn{display:flex;flex-direction:column;gap:6px;flex:none;width:104px}
.console .ibtn button{width:100%;height:28px;font-size:var(--t-label);padding:0 6px}
.console .ibtn button:first-child{height:34px;font-weight:600}
/* 첨부 · 강제전송 — 한 줄에 반씩 */
.console .ibtn .ib-half{display:flex;gap:4px}
.console .ibtn .ib-half button{flex:1 1 0;min-width:0;padding:0 2px;font-size:var(--t-badge);height:28px;font-weight:400}
#send-force{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.dropzone{display:flex;align-items:center;gap:10px;margin:0 10px 10px;padding:10px 12px;
  border:1.5px dashed var(--line);border-radius:var(--r);color:var(--mut);cursor:pointer;
  background:var(--bg);transition:border-color .12s,background .12s,color .12s}
.dropzone:hover{border-color:var(--acc);color:var(--fg)}
.dropzone .dz-ic{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;
  justify-content:center;background:var(--card);border:1px solid var(--line);flex:none}
.dropzone .dz-hint{margin-left:auto;white-space:nowrap}
.dropzone.over{border-color:var(--acc);border-style:solid;background:var(--acc-soft);color:var(--acc)}
.dropzone.over .dz-ic{background:var(--acc);color:var(--acc-fg);border-color:var(--acc)}
.dropzone.dropped{border-color:var(--ok);background:var(--card);color:var(--ok)}
.console .arow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;
  border-top:1px solid var(--line);background:var(--bg);border-radius:0 0 var(--r) var(--r)}
#att-list{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}
#att-list:empty{display:none}
.att{font-size:var(--t-label);background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:2px 8px;display:inline-flex;align-items:center;gap:5px}
.att .x{color:var(--mut);margin-left:3px}
.att .x:hover{color:var(--bad);text-decoration:none}
.att.img{padding-left:3px}
.att .thumb{width:20px;height:20px;border-radius:5px;display:inline-block;flex:none;
  background:linear-gradient(135deg,#0f766e,#2dd4bf)}
.att .thumb.t2{background:linear-gradient(135deg,#6d28d9,#be185d)}
.att.up{color:var(--mut)}
/* 이미 보낸 첨부 — 파일은 남겨 두되(Claude 가 나중에 읽는다) **다시 붙지는
   않는다**. 색만으로는 못 알아보니 '보냄' 이라고 적는다. */
.att{font-weight:600}
.att.sent{color:var(--mut);font-weight:400;border-style:dashed}
button.xs,.btn.xs{padding:2px 8px;font-size:var(--t-badge)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:var(--gap);
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{height:0}
.tabs a{padding:7px 13px;border-radius:6px 6px 0 0;color:var(--fg);white-space:nowrap}
.tabs a:hover{background:var(--card);text-decoration:none}
.tabs a.on{background:var(--card);border:1px solid var(--line);border-bottom-color:var(--card);
  margin-bottom:-1px;color:var(--acc);font-weight:600}
/* 새 프로젝트 화면의 세 갈래 — 설명이 붙은 큰 단추 */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:var(--gap)}
.modes a{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;
  background:var(--card);color:var(--fg);text-decoration:none}
.modes a b{font-size:var(--t-body)}
.modes a span{font-size:var(--t-label);color:var(--mut)}
.modes a:hover{border-color:var(--acc)}
.modes a.on{border:2px solid var(--acc);background:var(--acc-soft);padding:9px 13px}
.modes a.on b{color:var(--acc)}
@media (max-width:640px){.modes{grid-template-columns:1fr}}
/* 칸마다 줄을 가른다 — 이름과 입력이 어느 짝인지 헷갈리지 않게(한 줄에 한 짝) */
/* 칸은 줄 높이만큼 **늘려** 이름 칸 바탕이 위아래 끝까지 찬다 — 가운데 맞춤(center)이면 바탕이 글자 높이만 칠해져
   줄마다 들쭉날쭉했다(사람 지적 2026-11-04). 글자는 칸 안에서 가운데 */
.kv.wide.boxed{grid-template-columns:170px minmax(0,1fr);gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  align-items:stretch}
.kv.boxed>dt,.kv.boxed>dd{margin:0;padding:10px 14px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:center;min-height:52px}
.kv.boxed>dt:first-of-type,.kv.boxed>dt:first-of-type+dd{border-top:0}
.kv.boxed>dt{background:color-mix(in srgb, var(--bg) 55%, var(--card));font-weight:600;
  border-right:1px solid var(--line);flex-direction:row;align-items:center;justify-content:flex-start;gap:4px;flex-wrap:wrap}
.kv.boxed>dd>label{display:flex;align-items:center;gap:6px}
.kv.boxed>dd input:not([type=checkbox]):not([type=radio]),.kv.boxed>dd select,.kv.boxed>dd textarea{width:100%;max-width:640px}
@media (max-width:640px){.kv.wide.boxed{grid-template-columns:1fr}.kv.boxed>dt{border-right:0;min-height:0}
  .kv.boxed>dd{border-top:0;padding-top:2px;min-height:0}}
.kv{display:grid;grid-template-columns:140px minmax(0,1fr);gap:8px 14px;font-size:var(--t-mono);
  align-items:center}
.kv dt{color:var(--mut)}.kv dd{margin:0;word-break:break-all;min-width:0}
.kv dd input:not([type=color]):not([type=checkbox]),
.kv dd select,.kv dd textarea{width:100%;max-width:520px}
/* 넓은 화면에서는 한 줄에 두 쌍씩 — 오른쪽을 비우지 않는다 */
@media (min-width:1180px){.kv.wide{grid-template-columns:140px minmax(0,1fr) 140px minmax(0,1fr)}}
@media (min-width:1700px){.kv.wide{grid-template-columns:repeat(3,140px minmax(0,1fr))}}
.gauge{height:6px;background:var(--line);border-radius:3px;overflow:hidden;width:140px}
.gauge i{display:block;height:100%;background:var(--acc)}

/* ── popout (좌측 메뉴 없음) ─────────────────────────── */
body.popout .side{display:none}
body.popout .top{border-top-color:var(--pc,var(--acc))}
/* 프로젝트 테마색을 **배경과 섞어** 쓴다. 인라인으로 고정 색을 박으면
   다크모드에서 밝은 색이 깔려 글자가 묻힌다(실제로 겪었다). */
body.popout{background:color-mix(in srgb, var(--pc, var(--acc)) 8%, var(--bg))}

/* ── 모바일 760px ────────────────────────────────────── */
@media (max-width:760px){
  .shell{flex-direction:column}
  .side{display:none}          /* 가로 스크롤 띠 대신 햄버거 + 서랍 */
  .ham{display:inline-flex;align-items:center}
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .wrap{padding:12px}
  .top{position:static}
  .kv{grid-template-columns:1fr;gap:2px 0}
  .kv dt{margin-top:7px}
  table.stack tr.hdr{display:none}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{border-bottom:1px solid var(--line);padding:9px 0}
  /* 한 칸을 flex 로 둬야 배지·버튼이 서로 붙지 않는다
     (붙어서 '최근 변경 파일깃 상태보안 위험' 처럼 읽히던 버그) */
  table.stack td{border:0;padding:3px 0;white-space:normal;
    display:flex;flex-wrap:wrap;gap:5px;align-items:flex-start}
  table.stack td .badge{align-self:flex-start}
  table.stack td:empty{display:none}
  table.stack td[data-label]::before{content:attr(data-label);flex:none;min-width:84px;
    color:var(--mut);font-size:var(--t-label)}
  /* 값이 길면 라벨 아래로 통째로 내린다 */
  table.stack td[data-label="체크 항목"],table.stack td[data-label="판단 지시"],
  table.stack td[data-label="수집 대상"]{display:block}
  table.stack td[data-label="체크 항목"]::before,table.stack td[data-label="판단 지시"]::before,
  table.stack td[data-label="수집 대상"]::before{display:block;margin-bottom:3px}
  table.stack td[data-label="체크 항목"] .badge{margin:0 3px 3px 0}
  /* 체크 항목은 요약만 — 배지 8~10개가 세로로 쌓여 화면이 2배로 길어진다 */
  table.stack td[data-label="체크 항목"] .badges{display:none}
  .mob-hide{display:none !important}
  /* 숫자 칸은 데스크톱에서만 우측 정렬이다. 카드 모드에서 그대로 두면
     라벨('개수'·'파일')까지 오른쪽으로 밀려 다른 줄과 어긋난다. */
  table.stack td.num,table.stack td.num::before{text-align:left}
  table.stack td.num{justify-content:flex-start}
  .cell .term{height:200px}.termbox .term{height:var(--term-h,46vh)}
  .console .irow{flex-direction:column}
  /* 모바일에서는 가로 배치 — 주 동작(전송)이 **맨 오른쪽**(엄지 쪽)이다.
     DOM 순서는 전송·불러오기·첨부 그대로 두고 row-reverse 로 뒤집는다. */
  .console .ibtn{flex-direction:row-reverse;width:100%;gap:6px}
  .console .ibtn button{flex:1 1 0;width:auto;min-width:0;height:36px}
  .console .ibtn button:first-child{flex:1.4 1 0;font-weight:600}
  .console .ibtn .ib-half{flex:1.6 1 0}
  .console .ibtn .ib-half button{height:36px}
  .console .krow{gap:5px}
  .console .meta{gap:6px}
  /* 컨텍스트는 **한 줄을 통째로** 쓴다. 남은 틈에 끼우면 글자가 한 자씩
     세로로 쪼개지고 게이지는 화면 밖으로 나갔다. 글은 안 쪼개고, 모자라면
     게이지만 다음 줄로 내린다. */
  .console .meta .sp{display:none}
  .console .meta .ctx{flex:1 1 100%;min-width:0;flex-wrap:wrap;white-space:nowrap;row-gap:4px}
  .console .meta .ctx .gauge{flex:1 1 80px;width:auto;min-width:80px}
  .dropzone{padding:9px 10px;gap:8px}
  .dropzone .dz-ic{width:22px;height:22px}
  .dropzone .dz-hint{display:none}
  .pbar{gap:6px}
  /* 접히면 단추들이 정보 글 사이사이에 흩어져 두세 줄로 들쭉날쭉했다.
     틈(.sp)을 한 줄로 펴서 **단추는 늘 자기 줄에서 시작**하고, 그 줄을
     고르게 나눠 쓴다(엄지로 누를 넓이). */
  .pbar .sp{flex:1 0 100%;height:0;margin:0}
  .pbar > form{display:flex;flex:1 1 auto}
  .pbar > form > button, .pbar > button, .pbar > a.btn{flex:1 1 auto}
  .memo .bar .btn,.memo .bar button{flex:none}
  .console .krow button{padding:3px 8px}
  .dropzone{flex-wrap:wrap}
  .dropzone .dz-hint{margin-left:0;width:100%}
}

/* ── 메모 (단 하나. 계속 고쳐 쓰는 메모장) ─────────────── */
.memo{display:flex;flex-direction:column;gap:8px}
.memo textarea{width:100%;min-height:clamp(220px,34vh,520px);resize:vertical;line-height:1.6;
  font-family:var(--mono);font-size:var(--t-mono)}
.memo .bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.memo .bar .sp{flex:1}

/* ── 이전 리포트 (details) ───────────────────────────── */
details.rep{border:1px solid var(--line);border-radius:6px;margin-bottom:7px;background:var(--card)}
details.rep>summary{cursor:pointer;list-style:none;padding:7px 11px;display:flex;align-items:center;gap:9px;
  font-size:var(--t-mono)}
details.rep>summary::-webkit-details-marker{display:none}
details.rep>summary::after{content:"▾";margin-left:auto;color:var(--mut);font-size:var(--t-label)}
details.rep[open]>summary{border-bottom:1px solid var(--line)}
details.rep[open]>summary::after{content:"▴"}
details.rep>summary:hover{background:var(--bg)}
details.rep .bd{padding:9px 11px}
details.rep .fi{padding:6px 0;border-bottom:1px solid var(--line)}
details.rep .fi:last-child{border-bottom:0}

.card .memo textarea{min-height:clamp(110px,15vh,230px)}

/* ── 메모 단독 편집 창 (새 창) ──────────────────────── */
body.memoedit .wrap{display:flex;flex-direction:column;height:calc(100vh - 46px);padding:12px 14px}
body.memoedit .card{display:flex;flex-direction:column;flex:1;margin:0;overflow:hidden}
body.memoedit .memo{flex:1;min-height:0}
body.memoedit .memo textarea{flex:1;min-height:0;height:100%}

/* ── 사용량 ─────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tile{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
.tile .v{font-size:var(--t-stat);font-weight:600;font-variant-numeric:tabular-nums;margin:2px 0}
.bar2{display:inline-block;height:7px;background:var(--line);border-radius:4px;overflow:hidden;
  min-width:70px;vertical-align:middle}
.bar2 i{display:block;height:100%;background:var(--acc)}
.spark{display:flex;gap:8px;align-items:flex-end;height:150px}
.sp-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
@media (max-width:640px){.spark .sp-v,.spark .sp-col>.label{font-size:10px;letter-spacing:-.3px}}
.sp-bar{flex:1;width:100%;display:flex;align-items:flex-end;background:var(--bg);border-radius:5px;overflow:hidden}
.sp-bar i{display:block;width:100%;background:var(--acc);border-radius:5px 5px 0 0;min-height:2px}
@media (max-width:760px){.spark{height:120px;gap:4px}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── 워치독 미읽음 모달 ─────────────────────────────── */
dialog.wd-modal{width:min(760px,94vw);max-height:84vh;padding:0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);color:var(--fg);display:none;flex-direction:column}
dialog.wd-modal[open]{display:flex}
.wd-head{display:flex;align-items:center;gap:6px;padding:9px 11px 9px 14px;border-bottom:1px solid var(--line)}
/* 머리줄 버튼은 높이를 맞춘다 — '전부 읽음' 과 '✕' 가 따로 놀던 문제 */
.hbtn{height:30px;padding:0 11px;font-size:var(--t-label);display:inline-flex;align-items:center}
.hbtn.ico{width:30px;padding:0;justify-content:center;font-size:var(--t-mono)}
dialog:focus,dialog:focus-visible{outline:none}   /* 파란 포커스 테두리 제거 */
/* 덮개 — 모든 모달이 하나다(테마를 따른다). 모달마다 색을 따로 두지 않는다 */
dialog::backdrop{background:var(--backdrop)}
/* 도는 표시 — 하나다. 자리는 크기(--spin-size · --spin-w) · 색(--spin-c · --spin-bg) · 언제 보일지만 고른다 */
.spin{display:inline-block;flex:none;width:var(--spin-size,12px);height:var(--spin-size,12px);border-radius:50%;
  border:var(--spin-w,2px) solid var(--spin-bg,var(--line));border-top-color:var(--spin-c,var(--acc));
  animation:nx-spin .8s linear infinite;vertical-align:-1px}
@keyframes nx-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}
.wd-body{padding:14px;overflow:auto;flex:1}
.wd-foot{display:flex;align-items:center;gap:8px;padding:9px 14px;border-top:1px solid var(--line);background:var(--bg)}
.wd-rep{border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.wd-rep.done{opacity:.45}
.wd-rh{display:flex;align-items:center;gap:8px;padding:8px 11px;background:var(--bg);
  border-bottom:1px solid var(--line);font-size:var(--t-mono)}
.wd-fi{display:flex;gap:9px;padding:9px 11px;border-bottom:1px solid var(--line)}
.wd-fi:last-child{border-bottom:0}
.wd-fi .badge{flex:none;align-self:flex-start;margin-top:1px}   /* 세로로 늘어나지 않게 */
@media (max-width:760px){
  dialog.wd-modal{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
  .wd-body{padding:11px}
}

/* ── 미읽음 표시 ────────────────────────────────────── */
.nd{width:7px;height:7px;border-radius:50%;background:var(--bad);display:inline-block;flex:none}
.notice{display:flex;align-items:center;gap:8px;padding:9px 13px;margin-bottom:var(--gap);
  background:var(--card);border:1px solid var(--line);border-left:3px solid var(--bad);
  border-radius:var(--r);color:var(--fg)}
.notice:hover{text-decoration:none;border-color:var(--bad)}
.pcard .st .unread{color:var(--bad);display:inline-flex;align-items:center;gap:5px}
.pcard .st .unread b{color:var(--bad)}
/* 🐕 열린 지적 — 태그 꼴. 카드 전체를 덮는 링크(.stretch) 위로 올려 눌리게 한다 */
.pcard .st .wd-tag{position:relative;z-index:2;pointer-events:auto;display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  padding:2px 9px;border-radius:999px;font:inherit;font-size:var(--t-label);cursor:pointer;
  color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent);border:1px solid transparent}
.pcard .st .wd-tag b{margin-left:0;color:var(--bad)}
.pcard .st .wd-tag:hover{border-color:var(--bad);text-decoration:none}
.side nav a .nd,dialog.drawer nav a .nd{margin-left:auto}
.badge.nb{background:var(--bad);color:#fff;margin-left:6px}
@media (max-width:760px){.notice{align-items:flex-start;flex-wrap:wrap}}

/* 고를 수 있는 칩 (태그 선택) */
.chip.pick{position:relative;user-select:none}
.chip.pick input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip.pick:has(input:checked){background:var(--c,var(--acc));border-color:var(--c,var(--acc));
  color:#fff;box-shadow:none}
.bad{color:var(--bad)}

/* 디스크 사용 막대 */
.diskbar{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--line);
  margin-top:5px;max-width:520px}
.diskbar i{display:block;height:100%}
.dkey{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:4px;vertical-align:-1px}
.p0{background:var(--acc)} .p1{background:#7c3aed} .p2{background:#b45309} .p3{background:#4d7c0f}

ol.chk{margin:4px 0 0;padding-left:20px;font-size:var(--t-mono);line-height:1.9}

/* ── 로그인 ───────────────────────────────────────────── */
body.loginpage{display:grid;place-items:center;min-height:100vh;padding:16px;
  background:var(--bg)}
.loginbox{width:100%;max-width:340px;display:flex;flex-direction:column;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 18px;box-shadow:0 6px 24px rgba(0,0,0,.10)}
.lb-brand{display:flex;align-items:center;gap:7px;font-size:var(--t-h2);
  margin-bottom:4px}
.lb-l{display:flex;flex-direction:column;gap:4px;font-size:var(--t-label);color:var(--mut)}
.lb-l .in{width:100%}
.loginbox .btn{width:100%;justify-content:center;margin-top:4px}
.lb-err{font-size:var(--t-label);color:#fff;background:var(--bad);
  border-radius:var(--r);padding:7px 9px}
.lb-foot{font-size:var(--t-badge);text-align:center;margin-top:2px}
a.label{text-decoration:none}
a.label:hover{border-color:var(--acc);color:var(--acc)}

/* ── 알림 띠 ───────────────────────────────────────────── */
.flash{font-size:var(--t-body);padding:8px 11px;border-radius:var(--r);
  margin-bottom:var(--gap);border:1px solid var(--line);background:var(--acc-soft);
  color:var(--fg)}
.flash.bad{background:color-mix(in srgb,var(--bad) 14%,var(--card));
  border-color:var(--bad)}

.nx-stale{position:fixed;inset:0 0 auto 0;margin:0;width:auto;height:auto;border:0;color:var(--fg);z-index:2147483000;display:flex;gap:10px;align-items:center;justify-content:center;
  flex-wrap:wrap;padding:8px 16px;background:color-mix(in srgb,var(--warn,#d9a400) 22%,var(--card));
  border-bottom:1px solid var(--warn,#d9a400);font-size:14px}
/* 토스트 — 화면 가운데에 잠깐 알린다(_ask.html nx.toast). 페이지를 옮기지 않는다.
   모달 안에 넣으면 모달 기준으로 뜬다(dialog 는 position 이 잡혀 있다). */
.nx-toast{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:1000;max-width:min(560px,calc(100vw - 32px));padding:9px 13px;
  border-radius:var(--r);font-size:var(--t-body);color:var(--fg);
  background:var(--card);border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(0,0,0,.18);transition:opacity .3s;cursor:pointer}
.nx-toast.bad{background:color-mix(in srgb,var(--bad) 14%,var(--card));
  border-color:var(--bad)}
.nx-toast.ok{border-color:var(--ok)}
.nx-toast.out{opacity:0;pointer-events:none}
/* 복사한 단추 — 토스트에 더해 1.2초 표를 준다(nx.copy) */
.copied{border-color:var(--ok);color:var(--ok)}
/* 서버 알림(flash)의 토스트 — 화면 가운데에 쌓는다. 띠 모양(.flash)의 여백 · 바탕은 걷는다 */
.flash-toasts{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1000;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.flash-toasts .nx-toast{position:static;transform:none;margin:0;background:var(--card);pointer-events:auto}
.flash-toasts .nx-toast.bad{background:color-mix(in srgb,var(--bad) 14%,var(--card))}
.flash-toasts .nx-toast.out{pointer-events:none}
dialog .nx-toast{position:sticky;left:auto;bottom:0;transform:none;
  display:block;margin-top:10px}

/* 일자별 막대 — 하루치만 있을 때 한 칸이 화면을 다 먹지 않게 */
.spark{align-items:flex-end}
.spark .sp-col{max-width:72px}

/* 격자 셀 터미널 — 캡처 40줄이 거의 다 보이게 */
.grid2 .cell .term{height:360px}
@media (max-width:760px){ .grid2 .cell .term{height:260px} }

/* 모달 본문 — 긴 경로가 가로로 잘리던 문제(모바일에서 특히) */
.wd-body .mono, .wd-fi .label, .wd-rep .label{
  overflow-wrap:anywhere; word-break:break-word; white-space:normal}
.wd-fi > div{min-width:0}
.wd-modal{max-width:min(880px,96vw)}
/* 이전 대화 — Claude 화면 한 줄(터미널 폭)이 접히지 않게 넓게 연다 */
dialog.wd-modal.hist-modal{width:min(1800px,96vw);max-width:96vw;max-height:92vh}
.hist-modal #hist-text{max-height:74vh;font-size:12px;line-height:1.45}
/* 모아보기 칸 크게 보기 — 글이 칸 폭에서 접힌다(.term 의 pre-wrap) */
#cell-view-txt{height:78vh;max-height:78vh;margin:0}
/* 새 버전 · 패치 알림 — 프로젝트 화면 입력 밑 얇은 한 줄(맨 위 띠가 아니다) */
.upd-line{margin:4px 0 0;padding:2px 8px;font-size:11px;line-height:1.5;color:var(--mut);border-left:2px solid var(--acc)}
@media (max-width:760px){
  .wd-modal{width:96vw;max-width:96vw}
  .wd-rh{flex-wrap:wrap;row-gap:4px}
}

/* ── 모바일 탭 타깃 ───────────────────────────────────────
   데스크톱은 마우스라 23~27px 로도 되지만 손가락은 안 된다.
   권장 44px 은 이 정보 밀도에 과하니 36px 을 실용 최소선으로 둔다.
   **모바일에서만** 키운다 — 데스크톱 밀도는 그대로. */
@media (max-width:760px){
  .btn, button, .tabs a, a.chip, .chip, .hbtn, .ham, .xs, .sec.xs,
  select, input[type=text], input[type=password], input[type=search],
  input[type=number], input:not([type]){min-height:36px}
  button.ico, .hbtn.ico{min-width:36px}
  /* 링크 단추(a.btn)는 키만 커지고 글자는 **위에 붙어** 있었다('새 창').
     button 은 저절로 가운데지만 a 는 아니다 — 가운데로 모은다. */
  .btn{display:inline-flex;align-items:center;justify-content:center}
  .krow button{min-height:38px;min-width:42px}      /* Esc·1·2·▼ 같은 키패드 */
  .chips a.chip, .chips label.chip{padding:7px 11px}
  .tabs a{padding:9px 12px}
  /* 체크박스·라디오 — 13px 은 못 누른다 */
  input[type=checkbox], input[type=radio]{width:18px;height:18px}
  label:has(> input[type=checkbox]), label:has(> input[type=radio]){
    display:inline-flex;align-items:center;gap:7px;min-height:36px}
  .swatch{width:30px;height:30px}                   /* 색 스와치 18px → 30px */
  .swatches{gap:8px}
  /* 상단바 */
  .top .ham, .top .btn, .top .label{min-height:36px;display:inline-flex;
    align-items:center}
  /* 표 안의 작은 버튼도 */
  table .sec.xs, table button{min-height:34px}
}

/* ── 모바일 다듬기 (브라우저 직접 확인에서 나온 것) ──────── */
/* ASCII 트리·명령 블록은 줄바꿈하면 모양이 깨진다. 가로 스크롤이 맞다. */
.term.keep{white-space:pre;overflow-x:auto}

@media (max-width:760px){
  /* 새 프로젝트 점선 카드 — 세로로 너무 컸다 */
  .pcard.new{min-height:0;padding:16px}

  /* 격자 셀 헤더가 3단으로 깨지던 것 — 이름+상태 한 줄, 경로 아래 줄 */
  .grid2 .cell .hd{flex-wrap:wrap;row-gap:2px}
  .grid2 .cell .hd .nm{flex:0 0 auto}
  .grid2 .cell .hd .pt{flex:1 0 100%;order:9;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}

  /* 워치독 모달 — '읽음' 버튼이 줄 떨어지던 것 */
  .wd-rh{align-items:center}
  .wd-rh form{margin-left:auto}

  /* 지문 '재료' 긴 문자열은 모바일에서 접는다 — 데스크톱은 그대로 */
  #wd-fps td[data-label="재료"]{display:none}
}
.mob-only{display:none}
@media (max-width:760px){ .mob-only{display:block} }

/* 이전 리포트(탭 본문)도 모달과 같은 규칙 — 긴 경로가 가로로 잘리던 것 */
.rep .bd, .rep .fi, .rep .fi .label, .rep .fi .mono,
#wd-fp td, #wd-fps td{
  overflow-wrap:anywhere; word-break:break-word; white-space:normal}
.rep .fi{min-width:0}

/* 새 창 메모 편집기 — 긴 프로젝트 경로가 헤더를 가로로 밀어내던 것.
   경로는 줄여서 보여주고(말줄임), 줄바꿈 가능한 자리에선 접는다. */
.memo .bar{flex-wrap:wrap;row-gap:6px;min-width:0}
.memo .bar > *{min-width:0}
.memo .bar .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  flex:1 1 120px;max-width:100%}
/* 긴 내용이 조상 flex 를 밀지 않게 — 최소 폭을 풀어 준다 */
.shell, .main, .wrap, .card{min-width:0}
body.memoedit .wrap, body.memoedit .card, body.memoedit .memo{max-width:100%}

/* 상단 바 — popout 모드에서 긴 프로젝트 경로가 바를 밀어 테마 버튼이
   화면 밖으로 나갔다. 경로는 줄여서 보여준다(말줄임). */
.top{min-width:0}
.top > b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.top > .mono{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.top .label, .top .btn{flex:none}
.lb-info{font-size:var(--t-label);color:var(--fg);background:var(--acc-soft);
  border-radius:var(--r);padding:7px 9px}

/* ── 작업공간: 편집기 ──────────────────────────────────── */
.ws{display:grid;grid-template-columns:280px minmax(0,1fr);gap:var(--gap);
  height:calc(100vh - 92px)}
/* min-height:0 이 없으면 flex 항목이 **내용 높이**까지 부풀어 상자가 스크롤을
   잃는다. 줄번호 칸(473줄)이 그대로 늘어나 쪽 전체가 스크롤되던 원인. */
.ws-side,.ws-main{background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:10px;display:flex;flex-direction:column;
  min-width:0;min-height:0}
.ws-tree{overflow:auto;flex:1;margin-top:6px}
.ws-item{display:block;padding:5px 7px;border-radius:5px;color:var(--fg);
  text-decoration:none;font-size:var(--t-mono);font-family:var(--mono);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-item:hover{background:var(--acc-soft)}
.ws-item.dir{font-weight:600}
.ws-item.bin{color:var(--mut)}
.ws-main textarea{flex:1;width:100%;resize:none;font-family:var(--mono);
  font-size:var(--t-mono);line-height:1.5;border:1px solid var(--line);
  border-radius:var(--r);padding:10px;background:var(--bg);color:var(--fg)}
/* `padding:0` 을 여기서 주면 **입력층만** 여백이 사라진다. 색칠층·줄번호는
   `--edp` 만큼 밀려 있어서, 글자는 10px 아래에 그려지고 캐럿은 그 위 허공에
   선다 — "편집 누르면 커서가 글자 위쪽 이상한 데로 간다" 가 이것이었다.
   여백은 아래 `.ed-hl,.ed-wrap textarea` 한 곳에서만 정한다. */
.ws-main .ed textarea{border:0;border-radius:0;background:transparent}
@media (max-width:760px){
  .ws{grid-template-columns:1fr;height:auto}
  .ws-tree{max-height:40vh}
  .ws-main textarea{min-height:50vh}
}

/* 머리말의 긴 경로가 가로를 밀던 것 — 짧은 경로에서는 안 드러난다 */
.page-h p{overflow-wrap:anywhere;word-break:break-word;min-width:0}
@media (max-width:760px){
  #data-table td[data-label=""]{display:flex;gap:6px;flex-wrap:wrap}
}

/* 머리말은 배경이 무엇이든 또렷해야 한다 */
.page-h h1{color:var(--fg)}
.page-h p{color:var(--mut)}

/* ── 보기 — 마크다운 · mermaid · 한글/워드 글뽑기 ───────── */
.seg{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden}
.seg button{border:0;border-radius:0;background:transparent;color:var(--mut)}
.seg button.on{background:var(--acc-soft);color:var(--fg);font-weight:600}
.seg button[disabled]{opacity:.4}
.ws-view{flex:1;overflow:auto;border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;background:var(--bg);min-height:0}
.ws-note{font-size:var(--t-label);color:var(--mut);background:var(--acc-soft);
  border-radius:var(--r);padding:7px 9px;margin-bottom:10px}
.ws-note.bad{background:color-mix(in srgb,var(--bad) 14%,var(--card));color:var(--bad)}
.ws-doc{white-space:pre-wrap;word-break:break-word;font-family:var(--mono);
  font-size:var(--t-mono);line-height:1.7;margin:0;color:var(--fg)}
.ws-img{max-width:100%;height:auto;display:block;margin:0 auto;
  background:repeating-conic-gradient(var(--line) 0 25%,transparent 0 50%) 0/18px 18px}
.ws-pdf{width:100%;height:78vh;border:0;background:var(--card)}

.md-body{color:var(--fg);line-height:1.75;overflow-wrap:anywhere}
.md-body>:first-child{margin-top:0}
.md-body h1,.md-body h2,.md-body h3,.md-body h4{margin:1.3em 0 .5em;line-height:1.3}
.md-body h1{font-size:1.5rem;border-bottom:1px solid var(--line);padding-bottom:.25em}
.md-body h2{font-size:1.25rem;border-bottom:1px solid var(--line);padding-bottom:.2em}
.md-body h3{font-size:1.08rem}
.md-body p,.md-body ul,.md-body ol,.md-body blockquote{margin:.6em 0}
.md-body ul,.md-body ol{padding-left:1.5em}
.md-body li{margin:.2em 0}
.md-body li.task{list-style:none;margin-left:-1.2em}
.md-body code{font-family:var(--mono);font-size:.92em;
  background:var(--acc-soft);border-radius:4px;padding:1px 5px}
.md-body pre{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;overflow:auto}
.md-body pre code{background:none;padding:0;font-size:var(--t-mono);line-height:1.55}
.md-body blockquote{border-left:3px solid var(--acc);padding:.1em 0 .1em 1em;
  color:var(--mut);margin-left:0}
.md-body hr{border:0;border-top:1px solid var(--line);margin:1.4em 0}
.md-body a{color:var(--acc)}
.md-body img{max-width:100%;height:auto}
.md-tw{overflow-x:auto}
.md-body table{border-collapse:collapse;width:auto;min-width:50%}
.md-body th,.md-body td{border:1px solid var(--line);padding:6px 10px;
  font-size:var(--t-sm);text-align:left}
.md-body th{background:var(--acc-soft);font-weight:600;white-space:nowrap}
/* mermaid 는 제 색을 들고 온다 — 다크에서도 바탕을 깔아 글씨가 묻히지 않게 */
.md-body .mermaid{margin:1em 0;text-align:center;background:#fff;
  border-radius:var(--r);padding:10px;overflow-x:auto}
.md-body .mermaid.bad{background:color-mix(in srgb,var(--bad) 12%,var(--card));
  color:var(--bad);white-space:pre-wrap;text-align:left;font-family:var(--mono)}
@media (max-width:760px){
  .ws-view{padding:11px 12px}
  .ws-pdf{height:62vh}
}

/* ── 모아보기 머리: 이 PC 자원 ─────────────────────────── */
/* 색은 숫자를 거드는 것이다 — 숫자와 이름을 늘 같이 적는다. */
.resbar{gap:10px;align-items:center;margin:0 0 10px;flex-wrap:wrap}
.resbar .res{display:inline-flex;align-items:center;gap:5px;
  padding:2px 8px;border:1px solid var(--line);border-radius:999px;
  font-size:var(--t-badge);background:var(--card)}
.resbar .res b{font-variant-numeric:tabular-nums}
.resbar .res[data-level=warn]{border-color:var(--warn)}
.resbar .res[data-level=warn] b{color:var(--warn)}
.resbar .res[data-level=bad]{border-color:var(--bad)}
.resbar .res[data-level=bad] b{color:var(--bad)}
/* 보낸 결과 한 마디. 자리를 늘 비워 둬서 떠도 칸이 안 밀린다. */
.grid2 .ft .say{min-width:64px;white-space:nowrap}
.grid2 .ft .say.bad{color:var(--bad)}

/* ── 편집기 — 줄번호 · 색칠 겹침 · 찾기 ────────────────── */
/* 글자 치수가 **한 픽셀이라도** 어긋나면 색이 글자에서 밀린다.
   아래 네 값(글꼴·크기·줄간·탭폭)은 겹치는 두 층이 똑같아야 한다. */
.ed{--edf:var(--mono);
  --eds:var(--t-mono);--edl:1.55;--edp:10px;
  flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);min-height:0;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  overflow:hidden}
.ed-gut{font-family:var(--edf);font-size:var(--eds);line-height:var(--edl);
  padding:var(--edp) 8px var(--edp) 10px;margin:0;white-space:pre;text-align:right;
  color:var(--mut);background:color-mix(in srgb,var(--line) 30%,transparent);
  border-right:1px solid var(--line);overflow:hidden;user-select:none;
  -webkit-user-select:none;min-width:2.6em}
.ed.wrap .ed-gut{display:none}
.ed-wrap{position:relative;min-width:0;overflow:hidden}
.ed-hl,.ed-wrap textarea{
  font-family:var(--edf);font-size:var(--eds);line-height:var(--edl);
  padding:var(--edp);margin:0;border:0;tab-size:4;-moz-tab-size:4;
  white-space:pre;word-break:normal;overflow-wrap:normal;letter-spacing:0}
.ed.wrap .ed-hl,.ed.wrap .ed-wrap textarea{white-space:pre-wrap;
  word-break:break-word;overflow-wrap:anywhere}
.ed-hl{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  color:var(--fg);background:transparent}
.ed-hl code{font:inherit;background:none;padding:0;white-space:inherit;
  word-break:inherit;overflow-wrap:inherit;display:block}
.ed-wrap textarea{position:absolute;inset:0;width:100%;height:100%;resize:none;
  background:transparent;color:transparent;caret-color:var(--fg);outline:0;
  overflow:auto}
.ed-wrap textarea::selection{background:color-mix(in srgb,var(--acc) 38%,transparent)}
.ed-hl mark{background:color-mix(in srgb,var(--warn) 45%,transparent);
  color:inherit;border-radius:2px;padding:0}
.ed-hl mark.on{background:color-mix(in srgb,var(--acc) 60%,transparent);
  outline:1px solid var(--acc)}

/* 편집기 아래 상태줄 — 자리(줄·칸)와 저장 상태는 **다른 말**이다.
   간격을 주고, 저장 안 됨은 색으로 눈에 띄게 한다. */
.edbar{display:flex;align-items:center;gap:10px;margin-top:5px;flex-wrap:wrap}
.edbar .warn{color:var(--warn);font-weight:600}

/* 보기 모드에서 찾은 자리. 편집기 쪽(.ed-hl mark)과 같은 색을 쓴다 —
   같은 뜻에 다른 색을 쓰면 둘을 다른 기능으로 읽는다. */
.ws-view mark.vwhit{background:color-mix(in srgb,var(--warn) 45%,transparent);
  color:inherit;border-radius:2px;padding:0}
.ws-view mark.vwhit.on{background:color-mix(in srgb,var(--acc) 60%,transparent);
  outline:1px solid var(--acc)}

.findbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-bottom:8px;
  padding:7px 8px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--acc-soft)}
.findbar input{min-width:0;flex:1 1 130px}
.findbar #fd-n{min-width:52px;text-align:center}
button.on,.btn.on{background:var(--acc-soft);color:var(--fg);
  border-color:var(--acc);font-weight:600}

/* 트리 한 줄: 이름은 늘어나고, 도구(경로 복사·삭제)는 오른쪽에 붙는다.
   마우스로는 올릴 때만 뜨고, **손가락에는 늘 보인다** — hover 가 없다. */
.ws-item{display:flex;align-items:center;gap:6px}
.ws-item .it-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ws-item .it-tools{display:flex;gap:2px;flex:0 0 auto;opacity:0;
  transition:opacity .12s}
.ws-item:hover .it-tools,.ws-item:focus-within .it-tools{opacity:1}
.ws-item .it-tools button{border:0;background:none;color:var(--mut);
  padding:2px 4px;line-height:1;border-radius:4px;cursor:pointer;
  font-size:var(--t-badge);min-width:22px}
.ws-item .it-tools button:hover{background:var(--acc-soft);color:var(--fg)}
.ws-item .it-tools .it-del:hover{background:color-mix(in srgb,var(--bad) 18%,transparent);
  color:var(--bad)}
@media (hover:none){.ws-item .it-tools{opacity:1}}

.ws-item.hit{white-space:normal;line-height:1.35;padding:6px 7px}
.ws-item.hit .hit-p{display:block;color:var(--acc);font-size:var(--t-badge)}
.ws-item.hit .hit-t{display:block;color:var(--mut);font-size:var(--t-badge);
  white-space:pre;overflow:hidden;text-overflow:ellipsis}
.ws-code{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:11px 13px;overflow:auto;margin:0}
.ws-code code{font-family:var(--mono);font-size:var(--t-mono);
  line-height:1.55;background:none;padding:0;display:block}

/* highlight.js 색은 **우리 변수로** 짠다 — 테마용 css 를 따로 들이면
   다크/라이트가 따로 놀고, 배경색을 자기가 칠해 버린다. */
.hljs{background:none;color:var(--fg)}
.hljs-comment,.hljs-quote{color:var(--mut);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-doctag,
.hljs-type,.hljs-name,.hljs-strong{color:#c678dd;font-weight:600}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string
  {color:#98c379}
.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-variable,.hljs-template-variable
  {color:#d19a66}
.hljs-title,.hljs-title.function_,.hljs-title.class_,.hljs-selector-id
  {color:#61afef}
.hljs-attr,.hljs-params,.hljs-property,.hljs-selector-attr,.hljs-selector-class
  {color:#56b6c2}
.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}
.hljs-meta,.hljs-tag{color:var(--mut)}
.hljs-deletion{color:var(--bad)}
.hljs-emphasis{font-style:italic}
:root:not([data-theme="dark"]) .hljs-keyword,
:root:not([data-theme="dark"]) .hljs-selector-tag,
:root:not([data-theme="dark"]) .hljs-literal,
:root:not([data-theme="dark"]) .hljs-section,
:root:not([data-theme="dark"]) .hljs-type,
:root:not([data-theme="dark"]) .hljs-name{color:#8250df}
:root:not([data-theme="dark"]) .hljs-string,
:root:not([data-theme="dark"]) .hljs-regexp,
:root:not([data-theme="dark"]) .hljs-addition{color:#0a7d33}
:root:not([data-theme="dark"]) .hljs-number,
:root:not([data-theme="dark"]) .hljs-variable,
:root:not([data-theme="dark"]) .hljs-symbol{color:#b35900}
:root:not([data-theme="dark"]) .hljs-title,
:root:not([data-theme="dark"]) .hljs-title.function_,
:root:not([data-theme="dark"]) .hljs-selector-id{color:#0550ae}
:root:not([data-theme="dark"]) .hljs-attr,
:root:not([data-theme="dark"]) .hljs-property{color:#0b6b74}
:root:not([data-theme="dark"]) .hljs-built_in{color:#8a6100}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .hljs-keyword,
  :root:not([data-theme="light"]) .hljs-selector-tag,
  :root:not([data-theme="light"]) .hljs-literal,
  :root:not([data-theme="light"]) .hljs-section,
  :root:not([data-theme="light"]) .hljs-type,
  :root:not([data-theme="light"]) .hljs-name{color:#c678dd}
  :root:not([data-theme="light"]) .hljs-string,
  :root:not([data-theme="light"]) .hljs-regexp,
  :root:not([data-theme="light"]) .hljs-addition{color:#98c379}
  :root:not([data-theme="light"]) .hljs-number,
  :root:not([data-theme="light"]) .hljs-variable,
  :root:not([data-theme="light"]) .hljs-symbol{color:#d19a66}
  :root:not([data-theme="light"]) .hljs-title,
  :root:not([data-theme="light"]) .hljs-title.function_,
  :root:not([data-theme="light"]) .hljs-selector-id{color:#61afef}
  :root:not([data-theme="light"]) .hljs-attr,
  :root:not([data-theme="light"]) .hljs-property{color:#56b6c2}
  :root:not([data-theme="light"]) .hljs-built_in{color:#e6c07b}
}
@media (max-width:760px){
  .ed{min-height:52vh}
  .findbar{gap:5px}
  .findbar input{flex:1 1 100%}
}

/* ── 오류 화면 ─────────────────────────────────────────── */
.errbox{max-width:640px;margin:6vh auto;text-align:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:28px 22px}
.err-code{font-family:var(--mono);font-size:3rem;font-weight:700;
  line-height:1;color:var(--acc);opacity:.75}
.errbox h1{margin:10px 0 6px;font-size:1.3rem}
.err-why{color:var(--fg);overflow-wrap:anywhere;margin:0 0 4px}
.errbox .row{justify-content:center}
@media (max-width:760px){.errbox{margin:3vh auto;padding:20px 14px}
  .err-code{font-size:2.2rem}}

/* 새 창에서도 그 프로젝트로 돌아갈 길이 있어야 한다 */
.top .brand.pop{display:inline-flex;align-items:center;gap:6px;color:var(--fg);
  text-decoration:none;padding:2px 6px;border-radius:5px}
.top .brand.pop:hover{background:var(--acc-soft)}

/* ── 프로젝트 탭 — 터미널·편집기는 숨기기만 하고 DOM 에 남는다 ── */
.ptabs-wrap{display:flex;gap:8px;align-items:flex-end;margin:0 0 12px}
.ptabs{flex:1;min-width:0;margin-bottom:0}
.ptabs-wrap #tab-pop{flex:0 0 auto;margin-bottom:var(--gap)}
.tpane{margin-top:14px}
.tpane.frame{margin-top:10px;height:calc(100vh - 170px);min-height:420px}
.tpane.frame iframe{width:100%;height:100%;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);display:block}
/* iframe 안쪽은 제 머리말을 그리지 않는다 — 바깥 탭이 이미 말해 준다 */
body.embed .top{display:none}
body.embed .wrap{padding-top:0}
body.embed .ws{height:calc(100vh - 24px)}

/* 메모 — 세 줄 엿보기 + 모달 */
/* 컨텍스트 여유 — 색은 숫자를 거드는 것이다. 숫자·괄호·게이지가 늘 같이 간다. */
.ctx{display:inline-flex;align-items:center;gap:5px}
.ctx[data-level=warn] b{color:var(--warn)}
.ctx[data-level=bad] b{color:var(--bad)}
.ctx[data-level=warn] .gauge i{background:var(--warn)}
.ctx[data-level=bad] .gauge i{background:var(--bad)}

/* 아래 한 줄: 왼쪽 메모 · 오른쪽 질의. 폰에서는 위아래로 접힌다. */
.botrow{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media (max-width:760px){.botrow{grid-template-columns:1fr}}
.botrow > .card{margin-top:14px}
#ask1-turns .a1turn{border-top:1px solid var(--line);padding:7px 0;
  font-size:var(--t-badge)}
#ask1-turns .a1turn:first-child{border-top:0}
/* 최근 것 하나만 — 지난 문답은 '펼치기' 를 눌렀을 때만 */
#ask1-turns:not(.open) .a1turn:not(:last-child){display:none}
#ask1-turns:not(.open) .a1turn:last-child{border-top:0}
#ask1-more{margin-top:6px}
#ask1-turns .a1q{color:var(--mut)}
#ask1-turns .a1q::before{content:'물음 · '}
#ask1-turns .a1turn{cursor:pointer}
#ask1-turns .a1turn:hover .a1a,#ask1-turns .a1turn:focus-visible .a1a{color:var(--acc)}
#ask1-turns .a1turn:focus-visible{outline:0}
#ask1-turns .a1q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ask1-turns .a1a{margin-top:3px;word-break:break-word;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.a1full{margin:8px 0 0;white-space:pre-wrap;word-break:break-word;max-height:70vh;
  overflow:auto;font:inherit;line-height:1.6}

.memo-modal{width:min(820px,94vw);border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);color:var(--fg);padding:16px}
.memo-modal textarea{width:100%;min-height:46vh;resize:vertical;
  font-family:var(--mono);font-size:var(--t-mono);line-height:1.6;
  border:1px solid var(--line);border-radius:var(--r);padding:10px;
  background:var(--bg);color:var(--fg)}
@media (max-width:760px){
  /* 탭이 일곱이라 한 줄에 글자를 나란히 두면 끝('정보')이 잘렸다.
     폰에서는 **아이콘 위 · 이름 아래**로 세우고 칸을 똑같이 나눈다. */
  .ptabs a{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
    align-items:center;justify-content:center;gap:1px;
    padding:5px 1px;font-size:11px;line-height:1.25}
  .ptabs a .mi{width:auto;margin:0;font-size:1.05em}
  /* 탭 옆 '새 창' 은 아이콘만 — 글자 단추는 위 프로젝트 줄에 이미 있고,
     글자까지 달면 탭 여섯 개가 들어갈 자리를 먹는다. 높이는 탭과 맞춘다. */
  .ptabs-wrap{align-items:stretch}
  .ptabs-wrap #tab-pop{min-width:36px;padding:0 8px;margin-bottom:0}
}
/* 더 좁은 폰(360 이하)까지 여섯 개가 들어가게 한 단계 더 조인다. */
@media (max-width:400px){
  .ptabs a{padding:5px 0;font-size:10.5px;letter-spacing:-.03em}
  /* 탭 줄이 상단 바에서 ☰·⧉·테마와 자리를 나눈다 — 곁 단추를 조여 탭 글자가 안 잘리게 */
  .top.hastabs{gap:4px;padding-left:6px;padding-right:6px}
  .top.hastabs .ham{padding:3px 6px}
  .ptabs-wrap #tab-pop{min-width:28px;padding:0 4px}
  .ptabs-wrap{gap:5px}
  .tpane.frame{height:calc(100vh - 170px);min-height:360px}
  .memo-modal{width:96vw;padding:12px}
  .memo-modal textarea{min-height:52vh}
}


/* 파일 트리 — 줄줄이 나열하면 안 읽힌다 */
.ftree{list-style:none;margin:0;padding:0 0 0 2px}
.ftree .ftree{padding-left:16px;border-left:1px solid var(--line);margin-left:6px}
.ftree li{margin:2px 0;font-size:var(--t-sm)}
.ftree summary{cursor:pointer;list-style:none;display:flex;gap:7px;
  align-items:baseline;padding:2px 4px;border-radius:5px}
.ftree summary::-webkit-details-marker{display:none}
.ftree summary::before{content:"▸";color:var(--mut);font-size:.8em;width:10px}
.ftree details[open]>summary::before{content:"▾"}
.ftree summary:hover{background:var(--acc-soft)}
.ftree li>.mono{padding-left:17px}

/* 세션 상태로 상단 단추를 가른다 — 서버가 그린 순간과 지금이 달라도
   화면이 거짓말하지 않게 한다(실제로 "실행중" 과 "세션 없음" 이 같이 떴다). */
/* 상태는 셋이다 — off(세션 없음) · idle(셸만) · run(Claude). 기동은 off 에서만,
   종료·재기동은 **세션이 있으면** 쓴다. idle 을 off 로 묶었다가 셸만 떠 있는
   세션을 닫을 수 없게 만들었다. */
body:not([data-sess="off"]) .sess-when-off{display:none}
body[data-sess="off"] .sess-when-run{display:none}
/* 터미널이 비었을 때 까만 상자만 두지 않는다 */
/* 안내는 터미널 **안**에 떠야 한다. 기준이 없으면 화면 왼쪽 위로 튀어
   사이드바를 덮는다(로고가 안 눌렸다). 두 자리 모두 기준을 준다. */
.termbox,#pane-off{position:relative}
.term-note{position:absolute;left:0;right:0;top:0;z-index:2;
  padding:10px 12px;font-size:var(--t-sm);color:var(--term-fg);
  background:color-mix(in srgb,var(--term-bg) 86%,var(--acc));
  border-bottom:1px solid var(--term-line);border-radius:var(--r) var(--r) 0 0}

/* ── 포커스 테두리 ─────────────────────────────────────────
   키보드로 다닐 때 **지금 어디 있는지** 보여야 한다. 마우스 클릭에는
   안 뜨도록 :focus-visible 만 쓴다. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--acc);outline-offset:2px;border-radius:5px}
.inp:focus-visible{outline-offset:0}
/* 전송은 탭으로 바로 오는 자리다 — 더 또렷하게 */
#send:focus-visible{outline:3px solid var(--acc);outline-offset:3px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--acc) 22%,transparent)}
.term:focus-visible{outline-offset:-2px}

/* 워치독 모달 — 새로 온 리포트와 이미 읽은 것을 한눈에 가른다.
   읽은 것을 흐리게만 하면(.done) 모달을 열었을 때 어디부터가 새 것인지
   눈으로 찾아야 한다. 새 것에 색 띠를 둘러 먼저 보이게 한다. */
.wd-rep.fresh{border-color:var(--pc,#0f766e);
  box-shadow:inset 3px 0 0 var(--pc,#0f766e)}
.wd-rep.fresh>.wd-rh{background:color-mix(in srgb,var(--pc,#0f766e) 8%,transparent)}
.wd-rep.done{opacity:.55}
.wd-rep.done:hover{opacity:1}
/* 요약 줄만 여백이 없어 카드 테두리에 붙어 잘렸다 — 머리·본문과 맞춘다. */
.wd-rep>p.label{margin:9px 11px;}

/* 일자별 막대에 값을 적는다 — 눈금도 숫자도 없으면 높이 비교밖에 못 하고,
   그거면 막대를 그릴 이유가 없다. */
.sp-v{font-variant-numeric:tabular-nums;white-space:nowrap}
.bar2 + .num{margin-left:6px;font-variant-numeric:tabular-nums}

/* 사이드바 알림 점 — 두 가지를 가른다.
   진한 점 = 아직 **안 고친** 지적(할 일이 남았다)
   옅은 점 = 아직 **안 읽은** 리포트(읽으면 끝난다) */
.nd.soft{opacity:.45}

/* 묻는 자리 — 브라우저 기본 대화상자를 대신한다.
   기본 것은 주소를 그대로 띄우고 테마도 글꼴도 우리 것이 아니다. */
dialog.ask{width:min(440px,92vw);padding:0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);color:var(--fg)}
dialog.ask form{padding:16px 18px 14px}
dialog.ask h2{margin:0 0 6px;font-size:var(--t-h2)}
dialog.ask .inp{width:100%;margin-top:10px}
dialog.ask .bad{margin:8px 0 0}
dialog.ask button.danger,#p-del{background:var(--bad);border-color:var(--bad);color:#fff}

/* 메뉴·탭 앞 표식. 글을 **대신하지 않는다** — 이름이 늘 옆에 있다.
   기호마다 폭이 제각각이라 자리를 고정해 글자 줄이 안 흔들리게 한다. */
.mi{display:inline-block;width:1.25em;margin-right:.45em;font-style:normal;
  text-align:center;opacity:.85;line-height:1;flex:none}
.tabs a .mi{margin-right:.35em;opacity:.7}
.tabs a.on .mi{opacity:1}

/* 사이드바의 '새 프로젝트' — 목록의 마지막 줄이지만 **프로젝트가 아니다**.
   같은 모양이면 프로젝트인 줄 알고 누른다. 점선으로 가른다. */
/* 자주 쓰지 않는다. 프로젝트 줄과 같은 무게로 두면 목록이 그만큼 짧아진다.
   **폰에서는 얇게 하지 않는다** — 손가락으로 못 누른다(아래 미디어 쿼리). */
.side nav a.addp{padding-top:3px;padding-bottom:3px;min-height:0;font-size:var(--t-badge)}
.side nav a.addp,#drawer nav a.addp{color:var(--mut);
  border:1px dashed var(--line);border-radius:var(--r);margin-top:4px}
.side nav a.addp:hover,#drawer nav a.addp:hover{color:var(--acc);border-color:var(--acc)}
.side nav a.addp .mi,#drawer nav a.addp .mi{opacity:1;font-weight:700}
/* 첨부 알림 — 잘못된 것(빨강)과 알려 둘 것(회색)을 가른다. */
#att-err.mut{color:var(--mut)}

/* 사이드바 차례 바꾸기 — 평소엔 손잡이가 숨어 있다.
   늘 보이면 누르려다 끌어서 순서가 틀어진다. */
.cap.caprow{display:flex;align-items:center;gap:6px}
#p-overview .ovlead{display:block;white-space:pre-wrap;margin-top:3px;
  max-height:12em;overflow:auto}

/* 접어 둔 프로젝트 — 평소엔 줄 하나, 누르면 그 아래로 펼친다. */
.side nav .foldedbtn,#drawer nav .foldedbtn{display:flex;align-items:center;gap:6px;
  width:100%;justify-content:flex-start;margin:2px 0;color:var(--mut);
  background:none;border:0;padding:3px 8px;cursor:pointer;
  font-size:var(--t-badge);text-align:left}
.side nav .foldedbtn:hover,#drawer nav .foldedbtn:hover{color:var(--acc)}
.side nav .folded,#drawer nav .folded{border-left:2px solid var(--line);
  margin:0 0 4px 8px;padding-left:4px}
.side nav .folded a.pitem{opacity:.75}
.cap.caprow .capbtn{margin-left:auto;padding:1px 6px;line-height:1.4;
  font-size:var(--t-label);opacity:.55}
.cap.caprow .capbtn:hover{opacity:1}
.cap.caprow .capbtn.on{opacity:1;background:var(--acc-soft);border-color:var(--acc);
  color:var(--acc)}
.cap.caprow .capbtn.bad{border-color:var(--bad);color:var(--bad)}
/* 글자는 아이콘을 **설명**하려고 뒀는데, 좁은 사이드바에서 '정렬변경' 이
   늘 붙어 있으니 줄이 비좁았다. 뜻은 `title`·`aria-label` 로 옮겼다. */
.cap.caprow .capbtn{margin-right:0;padding:1px 5px}
a.pitem .grip{display:none;width:1em;margin-right:.3em;font-style:normal;
  opacity:.45;cursor:grab;flex:none}
nav.ordering a.pitem .grip{display:inline-block}
nav.ordering a.pitem{cursor:grab}
nav.ordering a.pitem.dragging{opacity:.5}

/* 첨부 한 칸의 작은 단추들 — 경로 다시 넣기·내려받기·빼기 */
.att .act{color:var(--mut);margin-left:4px;font-size:.95em}
.att .act:hover{color:var(--acc);text-decoration:none}
.att .thumb{cursor:zoom-in}

/* 크게 보기 */
dialog.imgview{padding:0;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);max-width:92vw;max-height:92vh}
dialog.imgview img{display:block;max-width:88vw;max-height:78vh;background:var(--bg)}
dialog.imgview .ivbar{gap:8px;padding:8px 10px;align-items:center}

/* 당기기 띠 — 터미널·입력칸 아래 */
.grip{height:9px;cursor:ns-resize;touch-action:none;position:relative;flex:none}
.grip::after{content:"";position:absolute;left:50%;top:3px;width:44px;height:3px;margin-left:-22px;
  border-radius:2px;background:var(--line)}
.grip:hover::after,body.gripping .grip::after{background:var(--acc)}
.termbox .grip{background:var(--term-bg)}
.termwrap.card .grip,#termwrap.card .grip{display:none}
body.gripping{cursor:ns-resize;user-select:none}
.console .inpwrap .inp{resize:none}

/* 좌측 메뉴 맨 위 — 이름 오른쪽에 작은 테마 단추 */
.side .brandrow,.dr-head{display:flex;align-items:center}
.side .brandrow{border-bottom:1px solid var(--line)}
.side .brandrow .brand{border-bottom:0}
.side .brandrow .brand{flex:1;min-width:0}
/* 이름 줄은 띠 전체를 칠하지 않는다 — 테마 단추처럼 둥근 칸만 칠한다 */
.side .brandrow .brand{flex:0 1 auto;margin:6px 0 6px 6px;padding:6px 10px;border-radius:8px}
.side .brandrow .brand.on{box-shadow:none}
.side .brandrow #thbtn{margin-left:auto}
.thico{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
  margin-right:8px;border-radius:6px;font-size:15px;line-height:1;text-decoration:none}
.thico:hover{background:var(--acc-soft);text-decoration:none}
a.btn.thico{padding:0;border:0;background:transparent;min-width:0;min-height:0;box-shadow:none;color:var(--fg)}
a.btn.thico:hover{background:var(--acc-soft)}
/* 상단 바 안의 탭 줄 */
.top.hastabs{padding-top:6px;padding-bottom:0;align-items:flex-end}
.top.hastabs .ham,.top.hastabs .brand.pop{align-self:center;margin-bottom:6px}
.top .ptabs-wrap{flex:1;min-width:0;margin:0;align-items:flex-end}
.top .ptabs{border-bottom:0}
.top .ptabs-wrap #tab-pop{margin-bottom:6px;align-self:center}

/* 지식 탭 안의 칸(문서 지도 · 워치독) */
.subtabs{margin:0 0 10px}
/* 칸이 넷이 되자 폰(384px)에서 마지막 칸이 화면 밖으로 나갔다 — 폰에서는 칸 사이를 좁히고 넘치면 다음 줄로 */
@media (max-width:640px){
  .subtabs{flex-wrap:wrap;row-gap:4px}
  .subtabs a{padding:6px 9px}
}
/* 탭 안 칸이 iframe 일 때(기억의 문서 지도·데이터, 검증의 리포트) — 칸 막대 아래를 다 쓴다 */
.frame.subpane{height:calc(100vh - 150px);min-height:420px}
.frame.subpane iframe{width:100%;height:100%;border:1px solid var(--line);border-radius:var(--r,8px);background:var(--card)}
@media (max-width:760px){ .frame.subpane{height:calc(100vh - 170px);min-height:360px} }

/* 터미널 위 상태 띠 — 반투명, 눌러도 아래 터미널을 가리지 않는다 */
#termwrap{position:relative}
.pane-status{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:3;max-width:calc(100% - 40px);
  display:flex;align-items:center;gap:8px;padding:4px 12px;border-radius:999px;min-height:0;
  background:rgba(255,255,255,.07);color:#e6efed;cursor:pointer;font:inherit;font-size:var(--t-label);font-size:var(--t-label);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid rgba(215,227,224,.18)}
.pane-status span{overflow:hidden;text-overflow:ellipsis}
.pane-status .spin{display:none;--spin-size:11px;--spin-bg:rgba(230,239,237,.3);--spin-c:#5eead4}
.pane-status.busy .spin{display:inline-block}
.pane-status.ask{background:rgba(220,38,38,.22)}
.pane-status:hover{background:rgba(255,255,255,.16)}

/* '지금 하는 일' 모달 — 서브에이전트·메인 세션 단계 */
.st-h{font-size:var(--t-body);margin:14px 0 6px}
.st-h.on::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;
  border:2px solid var(--line);border-top-color:var(--acc);animation:nx-spin .8s linear infinite;vertical-align:-1px}
.st-steps{margin:0;padding-left:0;list-style:none;font-size:var(--t-label);line-height:1.55}
.st-steps li{overflow-wrap:anywhere}
.st-steps .st-say{color:var(--mut)}
.st-steps .st-error{color:var(--bad)}
.st-facts{margin:0 0 6px;padding-left:20px;font-size:var(--t-label);line-height:1.6}
.st-more{margin:4px 0;font-size:var(--t-label)}
.st-more pre{max-height:30vh;margin:4px 0 0}
.st-cap{margin:8px 0 2px}

/* 상단 바의 탭 = 메뉴 아이콘 — 탭 꼴(테두리·밑줄) 없이, 햄버거와 같은 단추 결로 */
.top .ptabs{gap:4px;border-bottom:0;margin:0}
.top .ptabs a{border:0;border-radius:8px;padding:5px 10px;color:var(--mut);background:transparent}
.top .ptabs a:hover{background:var(--acc-soft);color:var(--fg)}
.top .ptabs a.on{border:0;background:var(--acc-soft);color:var(--acc);font-weight:600;box-shadow:none}
.top.hastabs{align-items:center;padding-top:6px;padding-bottom:6px}
.top.hastabs .ham{margin-bottom:0}
/* 새 창 바닥줄 */
.popfoot{margin:18px 0 4px;text-align:center;font-size:var(--t-label)}
.popfoot a{color:var(--mut)}
.popfoot a:hover{color:var(--acc)}
/* 좌측 메뉴 맨 위의 새 창 단추 — 이름 왼쪽 */
.side .brandrow #tab-pop{margin:0 0 0 8px}

/* 세션 머리줄 — 터미널 상자 위에 붙는 얇은 띠(공간을 아낀다) */
.pbar.termhead{margin:0;padding:5px 10px;gap:8px;border-radius:var(--r) var(--r) 0 0;border-bottom:0}
.pbar.termhead .nm{font-size:var(--t-body)}
.pbar.termhead + #termwrap{margin-top:0;border-top-left-radius:0;border-top-right-radius:0}
.pbar.termhead button,.pbar.termhead .btn{padding:2px 8px}

/* 터미널 상자 경계 — 다크에서도 보이게(밝은 테마에선 바탕 대비로 이미 보인다) */
.termbox{border:1px solid var(--term-edge)}
.pbar.termhead{border-color:var(--term-edge);border-left-color:var(--pc,var(--acc))}

/* '지금 하는 일' — 펼친 덩이와 떠 있는 갱신 띠 */
.st-float{display:inline-flex;align-items:center;gap:10px;padding:4px 6px 4px 12px;margin-right:6px;
  border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--card) 82%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(0,0,0,.08);font-size:var(--t-label)}
.st-float .hbtn{border-radius:999px;padding:3px 12px}
.st-auto{display:inline-flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.st-auto input{position:absolute;opacity:0;width:1px;height:1px}
.st-auto .sw{position:relative;width:30px;height:17px;border-radius:999px;background:var(--line);transition:background .15s}
.st-auto .sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;
  background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.st-auto input:checked + .sw{background:var(--acc)}
.st-auto input:checked + .sw::after{transform:translateX(13px)}
.st-auto input:focus-visible + .sw{outline:2px solid var(--acc);outline-offset:2px}
.st-when{min-width:9em;font-variant-numeric:tabular-nums}
.st-card{border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;margin:0 0 12px;background:var(--card)}
.st-card.on{border-left:3px solid var(--acc)}
.st-card .st-h{margin:2px 0 6px}
.st-part{margin:10px 0 0}
.st-part h4{margin:0 0 4px;font-size:var(--t-label);color:var(--mut);font-weight:600}
.st-pre{margin:0;max-height:none;white-space:pre-wrap}
.st-none{margin:0 0 12px}
@media (max-width:760px){ .st-float{gap:6px;padding:3px 4px 3px 8px} .st-when{display:none} }

/* 여백을 좌측 메뉴(안쪽 8px)에 맞춘다 — 상단 바·본문 모두 */
.top,.top.hastabs{padding-left:8px;padding-right:8px}
.wrap{padding:8px}
.tpane{margin-top:8px}
.top .ptabs a{padding:5px 8px}

/* 모달이 떠 있으면 뒤 화면은 굴러가지 않는다 — 휠·터치 스크롤은 모달 안에서만 */
html:has(dialog[open]),html:has(dialog[open]) body{overflow:hidden}
/* 굴림이 뒤로 새지 않게 하는 것은 **모달과 그 세로 본문**에만 건다. 전에는 `dialog *` 에 다 걸어,
   가로로 굴러가는 표·코드 상자 위에서 휠을 굴리면 그 상자가 세로 굴림을 삼켜 본문이 꼼짝 않았다(실측 2026-11-03) */
dialog,dialog .dv-body,dialog .wd-body{overscroll-behavior:contain}
dialog .dv-view table,dialog pre{overscroll-behavior-x:contain;overscroll-behavior-y:auto}

/* 터미널 한가운데 토스트 */
.term-toast{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);z-index:4;
  padding:9px 18px;border-radius:12px;pointer-events:none;opacity:0;max-width:calc(100% - 40px);
  background:rgba(20,28,27,.82);color:#e6efed;border:1px solid rgba(94,234,212,.45);
  font-size:var(--t-body);font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:opacity .18s,transform .18s}
.term-toast.in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.term-toast.out{opacity:0;transform:translate(-50%,-50%) scale(.96)}
.term-toast.at-inp{position:fixed;z-index:60;max-width:calc(100vw - 32px);text-align:center}
.term-toast.bad{border-color:rgba(248,113,113,.75);color:#fde2e2}

/* 세션 머리줄 — '실행 중' 뱃지는 감추고(불빛·모델이 말한다) 단추는 이모지 하나씩 */
#pbar-state[data-state="run"]{display:none}
.pbar.termhead .ico{min-width:30px;padding:2px 7px;font-size:15px;line-height:1.3}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (max-width:760px){
  /* 좁은 화면 — 이름·불빛·모델과 단추를 한 줄에 */
  .pbar.termhead{flex-wrap:nowrap}
  .pbar.termhead #sess-model{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pbar.termhead form{flex:none}
  .pbar.termhead .sp{flex:1 1 auto;height:auto;margin-left:auto}
  .pbar.termhead > form > button,.pbar.termhead > button{flex:none}
  .pbar.termhead .ico{min-width:36px;min-height:36px}
  /* 그래도 폰 폭에서 재기동 단추가 화면 밖으로 나갔다(420px 에서 26px) — 이름 · 모델 고르기가 줄어든다 */
  .pbar.termhead .nm{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pbar.termhead #sess-model-pick{min-width:0;flex:0 1 auto;width:auto;max-width:96px}
  .pbar.termhead .term-font-pick{min-width:0;flex:0 1 auto;width:auto;max-width:120px}
  .pbar.termhead .badge{flex:none}
}
@media (max-width:480px){
  .pbar.termhead #sess-agent,.pbar.termhead .badge:not(#pbar-state){display:none}   /* 에이전트 · codex 표시는 넓은 화면에서 */
  .pbar.termhead #term-font,.pbar.termhead #term-lines{display:none}   /* 글꼴 · 줄 수는 넓은 화면에서 고른다(이 브라우저에 남는다) — 폰 폭에서 머리줄이 넘쳤다 */
}

/* 단추 목록 모달 · 더한 단추 */
.ubtns{display:contents}
.krow .ubtn{border-style:dashed}
/* 링크 열기 단추 — 옆 단추와 같은 상자에 글자만 회색 · 끝에 ↗ (밑줄을 그으면 상자 안에서 끊겨 보였다) */
.krow .ubtn.ulink{display:inline-flex;align-items:center;justify-content:center;gap:2px;box-sizing:border-box;
  border:1px dashed var(--line);border-radius:6px;background:var(--card);color:var(--mut);text-decoration:none;
  padding:3px 9px;font-size:var(--t-label);line-height:1.6;white-space:nowrap;cursor:pointer}
@media (max-width:760px){.krow .ubtn.ulink{min-height:38px;min-width:42px;padding:3px 8px}}
.krow .ubtn.ulink:hover{color:var(--fg)}
.ub-tbl tr.ub-link td{color:var(--mut)}
.ub-tbl a.ulink{color:var(--mut);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.krow .ubtn.ulink::after{content:"↗";font-size:.8em;opacity:.8}
dialog.ub-modal{width:min(980px,96vw);max-width:96vw}
.ub-h{font-size:var(--t-body);margin:4px 0 8px}
.ub-form{border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;margin:10px 0 16px;background:var(--card)}
.ub-grid{display:grid;grid-template-columns:140px 160px 1fr;gap:8px 10px;align-items:start}
.ub-grid label{display:flex;flex-direction:column;gap:3px;font-size:var(--t-label);color:var(--mut)}
.ub-grid .ub-act{grid-column:3;grid-row:1 / span 2}
.ub-grid .ub-desc{grid-column:1 / span 2}
.ub-grid textarea{min-height:58px;resize:vertical;font-family:var(--mono)}
.ub-tbl .ub-a{white-space:pre-wrap;overflow-wrap:anywhere;max-width:420px}
.ub-ops{white-space:nowrap}
.ub-ops button{margin-left:4px}
@media (max-width:760px){ .ub-grid{grid-template-columns:1fr} .ub-grid .ub-act,.ub-grid .ub-desc{grid-column:auto;grid-row:auto} }

/* 메모 저장 — 단추는 오른쪽 아래, 저장하는 동안 도는 표시 */
.memo-busy{display:inline-flex;align-items:center;gap:6px;color:var(--acc)}
.memo-busy[hidden]{display:none}

/* 메모 — 한 줄씩, 5개 + 더보기 */
.memo-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.memo-line{display:flex;align-items:baseline;gap:8px;width:100%;min-width:0;text-align:left;padding:6px 8px;
  border:0;border-radius:6px;background:transparent;color:var(--fg);font:inherit;cursor:pointer;min-height:0}
.memo-line:hover{background:var(--acc-soft)}
.memo-line .ml-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memo-line .ml-n,.memo-line .ml-at{flex:none;font-size:var(--t-label)}
.memo-empty{margin:8px 0 0}
.memo-morebtn{margin-top:6px}
body.memoedit .memo-card{min-height:calc(100vh - 40px)}

/* 읽어 주는 글은 단추 안에 묶어 둔다 — 화면 밖 좌표로 새지 않게 */

/* F42 테스크 예약 — 터미널 탭 맨 아래 카드와 모달 */
.sch-card{margin-top:8px}
.sch-modal{width:min(980px,96vw);border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);color:var(--fg);padding:16px}
.sch-form textarea{width:100%;min-height:110px;resize:vertical;margin-top:8px;
  font-family:var(--mono);font-size:var(--t-mono);line-height:1.5;
  border:1px solid var(--line);border-radius:var(--r);padding:8px;
  background:var(--bg);color:var(--fg)}
.sch-form .bar{display:flex;gap:8px;align-items:center;margin-top:6px}
.sch-form .bar .sp{flex:1}
.sch-wrap{overflow-x:auto;margin-top:12px;max-height:46vh;overflow-y:auto}
.sch-tbl{width:100%;border-collapse:collapse;font-size:13px}
.sch-tbl th,.sch-tbl td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sch-tbl td.sch-line{max-width:320px;white-space:normal;overflow-wrap:anywhere}
.sch-modal{overflow-x:hidden}
.sch-done{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  min-width:min(360px,86vw);max-width:min(560px,90vw);padding:16px 20px;border-radius:var(--r);
  /* 모달과 같은 바탕이면 모달 글에 묻혀 안 보였다 — 초록 기운 바탕 · 굵은 테 · 뒤를 어둡게 덮는 그늘로 떼어 낸다 */
  background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--fg);border:2px solid var(--ok);
  box-shadow:0 0 0 100vmax rgba(0,0,0,.35),0 10px 40px #0009;cursor:pointer}
.sch-done b{display:block;font-size:16px;color:var(--ok);margin-bottom:6px}
.sch-done-what{font-size:13px}
.sch-done-when{font-size:13px;color:var(--mut,#888);margin:2px 0 8px}
.sch-done-text{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;max-height:30vh;overflow:auto;
  border-top:1px solid var(--line);padding-top:8px}
.sch-tbl td:last-child{white-space:nowrap}
.sch-tbl td button{margin-left:3px}
/* 좁은 화면 — 표 대신 줄마다 카드. 칸은 '머리말 값' 으로 한 줄씩, 단추는 맨 아래 한 줄 */
@media (max-width:560px){
  .sch-wrap{overflow-x:hidden}
  .sch-tbl thead{display:none}
  .sch-tbl,.sch-tbl tbody,.sch-tbl tr,.sch-tbl td{display:block;width:auto}
  .sch-tbl tr{border:1px solid var(--line);border-radius:var(--r);padding:6px 8px;margin-bottom:8px}
  .sch-tbl td{border:0;padding:2px 0;display:flex;gap:8px}
  .sch-tbl td::before{content:attr(data-l);flex:0 0 4em;color:var(--mut,#888)}
  .sch-tbl td.sch-line{max-width:none}
  .sch-tbl td:last-child{white-space:normal;flex-wrap:wrap;padding-top:6px}
  .sch-tbl td:last-child::before{display:none}
  .sch-tbl td button{margin-left:0}
}
.sch-hhead{margin-top:14px}
.sch-mode{display:block;font-size:11px;color:var(--mut,#888)}
.sch-mode.w{color:var(--warn)}
.sch-wlab{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.sch-h3{margin:14px 0 6px;font-size:14px}
.sch-hist{list-style:none;margin:6px 0 0;padding:0;max-height:40vh;overflow-y:auto}
.sch-hist li{border-bottom:1px solid var(--line);border-left:3px solid var(--ok,#16a34a)}
.sch-hist li.bad{border-left-color:var(--bad,#dc2626)}
.sch-hrow{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;background:none;
  border:0;color:var(--fg);padding:6px 8px;cursor:pointer;font-size:13px;min-width:0}
.sch-hrow{flex-wrap:wrap;row-gap:2px}
.sch-hrow span{white-space:normal;overflow-wrap:anywhere}
.sch-hrow span:last-child{flex:1 1 100%;min-width:0}
.sch-hist li.ok .st{color:var(--ok,#16a34a)} .sch-hist li.bad .st{color:var(--bad,#dc2626)}
summary.sch-hrow{list-style:none} summary.sch-hrow::-webkit-details-marker{display:none}
.sch-hfull{margin:0 8px 8px;max-height:36vh;overflow:auto;white-space:pre-wrap;padding:8px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);font-size:12px}
@media (max-width:760px){ .sch-hrow{flex-wrap:wrap;gap:4px 8px} .sch-hrow span:last-child{flex-basis:100%} }
@media (max-width:760px){ .sch-modal{width:96vw;padding:12px} }

/* 지금 하는 일 — 실행한 명령(서버 · 파이썬 · 테스트 · git) */
.st-runs .st-run.running b,.st-runs .st-run.running .st-rs{color:var(--warn)}
.st-runs .st-run.failed b,.st-runs .st-run.failed .st-rs{color:var(--bad)}
.st-runs .st-run.done .st-rs{color:var(--ok)}
.st-runs .st-cmd{display:block;font-size:11px;opacity:.75;margin:2px 0 0 0;white-space:pre-wrap;word-break:break-all}
.st-log .st-run.running b{color:var(--warn)} .st-log .st-run.failed b{color:var(--bad)}
.st-log .st-ans{font-size:12px;color:var(--ok);margin-top:2px}
.st-log .st-err{font-size:12px;color:var(--bad);margin-top:2px;word-break:break-all}
.sch-st.on{color:var(--warn);white-space:nowrap}
/* 예약 상태 태그 — 기다림·켜짐(진행 쪽) · 도는 중(주황) · 완료(초록) · 멈춤(회색) */
.sch-tag{white-space:nowrap}
.sch-tag.t-wait,.sch-tag.t-on{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
.sch-tag.t-run{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.sch-tag.t-done{background:color-mix(in srgb,var(--ok,#1a7f37) 16%,transparent);color:var(--ok,#1a7f37)}
.sch-tag.t-stop{background:var(--line);color:var(--mut)}
.sch-why{margin-top:3px;font-size:var(--t-badge);line-height:1.35}
.sch-st .spin{--spin-size:10px;margin-right:5px;--spin-bg:color-mix(in srgb,var(--warn) 30%,transparent);--spin-c:var(--warn)}

/* F43 문서 보기 모달 — 마크다운 + mermaid · 원문 · 인쇄 */
.dv-modal{width:min(960px,96vw);max-width:96vw;max-height:92vh;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);color:var(--fg);padding:14px 16px;box-sizing:border-box;overflow-x:hidden}
.dv-bar{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-bottom:10px}
.dv-bar .sp{flex:1}
.dv-title{font-size:15px;overflow-wrap:anywhere}
.dv-path{overflow-wrap:anywhere;min-width:0}
.dv-bar .seg button.on{background:var(--accent,#0f766e);color:#fff}
.dv-body{max-height:calc(92vh - 110px);overflow:auto}
.dv-view{overflow-wrap:anywhere}
.dv-view .mermaid{text-align:center;margin:10px 0;overflow-x:auto}
.dv-img{display:block;max-width:100%;max-height:calc(92vh - 130px);height:auto;margin:0 auto;object-fit:contain}
.dv-pdf{display:block;width:100%;height:calc(92vh - 130px);border:0;background:#fff}
.dv-media{display:block;max-width:100%;max-height:calc(92vh - 130px);margin:0 auto;background:#000}
.dv-audio{display:block;width:100%;margin:24px 0}
.dv-view .mermaid svg{max-width:100%;height:auto}
.dv-view table{display:block;max-width:100%;overflow-x:auto}
.dv-raw{white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--mono);font-size:var(--t-mono);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:10px;margin:0}
@media (max-width:760px){ .dv-modal{padding:10px} .dv-bar .sp{flex-basis:100%;height:0} }

/* 설정 → 기능목록 — 설명서(총람)와 기능마다 정의서 */
.feat-guide-body{max-height:70vh;overflow:auto;border-top:1px solid var(--line);padding-top:8px}
.feat-guide-body .mermaid,.feat-intro .mermaid{text-align:center;margin:10px 0;overflow-x:auto}
.feat-guide-body .mermaid svg,.feat-intro .mermaid svg{max-width:100%;height:auto}
.feat-intro{font-size:13px;margin:0 0 10px;padding:8px 10px;border-left:3px solid var(--line)}
.feat-more{margin-top:4px}
.feat-more summary{cursor:pointer;color:var(--accent,#0f766e)}
.feat-spec{display:grid;grid-template-columns:max-content 1fr;gap:4px 10px;margin:6px 0 2px;font-size:13px}
.feat-spec dt{font-weight:600;color:var(--mut,#888);white-space:nowrap}
.feat-spec dd{margin:0;overflow-wrap:anywhere}
.feat-spec dd p{margin:0}
@media (max-width:760px){ .feat-spec{grid-template-columns:1fr} .feat-spec dt{margin-top:4px} }

/* 기억 탭 — 지식 영역 트리(영역 → 문서) */
.k-tree summary{cursor:pointer;list-style:none}
.k-tree summary::-webkit-details-marker{display:none}
.k-tree summary::before{content:"▸ ";color:var(--mut,#888)}
.k-tree[open] summary::before{content:"▾ "}
.k-tree-docs{list-style:none;margin:6px 0 2px 14px;padding:0 0 0 10px;border-left:1px solid var(--line)}
.k-tree-docs li{margin:4px 0;overflow-wrap:anywhere}
.k-tree-docs .k-sum{display:block;margin-left:22px}
.k-tree-more{margin-top:6px}

/* 세션 머리줄 ⏹ · 🕘 · 🔄 — 큰 화면은 이름까지(잘못 누르지 않게), 폰 폭에서만 그림만 */
.pbar.termhead .ico .ico-lbl{margin-left:5px;font-size:13px}
@media (max-width:760px){ .pbar.termhead .ico .ico-lbl{display:none} }

/* 워치독 대시보드 — 펼친 프로젝트는 카드에 최근 리포트 3장, 접어 둔 것은 아래에 작은 카드로 이름만 */
.wdb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:12px}
.wdb-card{display:flex;flex-direction:column;gap:8px;margin:0}
.wdb-card:target{outline:2px solid var(--acc);outline-offset:2px}
.wdb-card .wdb-h{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.wdb-card .wdb-h .sp{flex:1}
.wdb-rep{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:transparent;border:1px solid var(--line);border-left:3px solid var(--line);
  border-radius:var(--r);padding:7px 10px}
.wdb-rep.fresh{border-left-color:var(--bad)}
.wdb-rep:hover{border-color:var(--acc);border-left-color:var(--acc)}
.wdb-rep .wdb-rh{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:var(--t-label)}
.wdb-rep .wdb-t{font-size:13px;margin-top:4px;overflow:hidden;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical}
.wdb-folded{display:flex;flex-wrap:wrap;gap:8px}
.wdb-mini{padding:6px 12px;border:1px dashed var(--line);border-radius:var(--r);
  color:var(--mut);font-size:var(--t-label);opacity:.65;cursor:default;user-select:none}
.wd-rep.focus{outline:2px solid var(--acc);outline-offset:-2px}

/* 데이터 — 끌어다 놓기 · 올리는 중 · 썸네일 */
.data-drop{border:2px dashed var(--line);border-radius:var(--r);padding:10px 12px;margin-bottom:10px;
  text-align:center;color:var(--mut);font-size:13px;transition:border-color .12s,background .12s}
#data-card.drop-on{outline:2px solid var(--accent,#0f766e);outline-offset:2px}
#data-card.drop-on .data-drop{border-color:var(--accent,#0f766e);color:var(--accent,#0f766e);
  background:color-mix(in srgb,var(--accent,#0f766e) 10%,transparent)}
.data-prog{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.data-prog .label{overflow-wrap:anywhere;min-width:0}
.data-bar{flex:1;min-width:80px;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.data-bar i{display:block;height:100%;width:0;background:var(--accent,#0f766e);transition:width .2s}
.data-name a{display:inline-flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}
.data-thumb{width:40px;height:40px;object-fit:cover;border-radius:4px;border:1px solid var(--line);
  background:var(--card);flex:none}
.data-ico{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;flex:none}
/* 단추는 **줄 오른쪽 끝에 붙인다.** 가운데 떠 있으면 어느 줄 것인지
   애매하고, 줄마다 길이가 달라 세로로 들쭉날쭉해 보인다(실측: 사람이
   "위치 좀 제대로" 라고 했다). 이름칸이 남는 폭을 먹고(`width:100%`)
   액션칸은 글자만큼만 차지하게(`width:1%`) 해서 오른쪽에 못 박는다. */
.data-name{width:100%;white-space:normal}
/* 이름칸이 폭을 다 먹으면 **크기·올린 때가 두 줄로 접힌다**(실측: "크 기").
   그 둘은 짧고 고정된 값이라 접힐 까닭이 없다 — 접지 않게 못 박는다. */
#data-table th,#data-table td{white-space:nowrap}
#data-table .data-name,#data-table th:first-child{white-space:normal}
.data-acts{white-space:nowrap;text-align:right;width:1%}
.data-acts > *{margin:2px 0 2px 4px}
.act-ico{margin-right:4px}
@media (max-width:640px){
  /* 폰에서는 한 줄에 다 못 들어간다 — **그림만** 남기고 글자는 접는다.
     무엇인지는 `title` 로 남는다. */
  .data-acts{white-space:normal;width:auto;text-align:left}
  .data-acts .act-tx{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap}
  .act-ico{margin-right:0;font-size:1.05em}
}

/* 편집기 — 코드 편집기(Monaco) · 펼치는 트리 · 끌어서 옮기기 */
.ed-mo{flex:1;min-height:60vh;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ws-item.open > .it-nm{color:var(--acc)}
.ws-item.here{background:var(--acc-soft)}
.ws-item.on{background:color-mix(in srgb,var(--acc) 22%,transparent);font-weight:600}
.ws-item.dragging{opacity:.45}
.ws-item.drop-on,#ws-path.drop-on{outline:2px dashed var(--acc);outline-offset:-2px;
  background:color-mix(in srgb,var(--acc) 14%,transparent)}
#ws-path{border-radius:5px;padding:2px 4px}
.ws-none{padding:3px 7px;font-size:var(--t-badge)}

/* 지금 하는 일 — 도는 셸 목록(접어 둔다) */
#st-shells summary{cursor:pointer}
.st-shells{margin:6px 0 0;padding-left:0;list-style:none}
.st-shells li{margin:4px 0}
.st-shells .st-cmd{color:var(--mut);overflow-wrap:anywhere;white-space:normal}

/* 테스트 칸 — 어떻게 도나 · 도는 중 · 스크린샷 작은 그림 */
.sim-how{margin:0 0 10px;font-size:var(--t-label)}
.sim-how summary{cursor:pointer}
.sim-steps{margin:6px 0 0;padding-left:22px}
.sim-steps li{margin:2px 0;color:var(--mut)}
.sim-steps li.on{color:var(--fg);font-weight:600}
.sim-steps li.done{color:var(--ok,#15803d)}
.sim-live{margin:0 0 10px;padding:6px 10px;border-radius:6px;font-size:var(--t-label);
  background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--fg);overflow-wrap:anywhere}
.sim-live .spin,#sim-list .spin{--spin-size:10px;--spin-bg:color-mix(in srgb,var(--warn) 30%,transparent);--spin-c:var(--warn)}

/* 마크다운 속 그림 · 테스트 결과 스크린샷 모음 */
.md-body img.md-img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px;margin:6px 0}
.dv-shots{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.dv-shots h3{margin:0 0 8px;font-size:var(--t-body)}
.dv-shots figure{margin:0 0 12px}
.dv-shots img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:6px}
.dv-shots figcaption{margin-top:3px}
.sim-title{color:var(--fg);text-decoration:none;cursor:pointer}
.sim-title:hover{text-decoration:underline}
/* 누가 돌렸나 — 자동(Claude 세션) · 수동(사람) */
.og-tag{margin-right:6px;vertical-align:1px}
.og-tag.og-auto{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
.og-tag.og-manual{background:var(--line);color:var(--fg)}
/* 시뮬레이터 스크립트 — 저장본 재생 · 새로 짬 */
.sc-tag{margin-right:6px;vertical-align:1px}
.sc-tag.sc-replay{background:color-mix(in srgb,var(--ok, #2e9d5b) 16%,transparent);color:var(--ok, #2e9d5b)}
.sc-tag.sc-fresh{background:var(--line);color:var(--mut, var(--fg))}
.st-fold .st-more{margin:0 0 4px}
/* 이번 요청(지금) 것은 음영 — 위로 펼친 옛것과 갈린다 */
.st-steps li.st-cur{background:var(--acc-soft);border-radius:4px;padding:1px 6px;margin:1px 0}
.st-steps li:not(.st-cur){padding:1px 6px}

/* 마인드맵 — 카드 목록 · 보기/편집 모달 */
.mm-ask{display:flex;gap:6px;align-items:stretch}
.mm-ask textarea{flex:1;min-width:0}
.mm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.mm-c{border:1px solid var(--line);border-radius:8px;background:var(--card);cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .12s}
.mm-c:hover,.mm-c:focus{box-shadow:0 2px 10px color-mix(in srgb,var(--fg) 14%,transparent);outline:none}
.mm-th{height:130px;display:flex;align-items:center;justify-content:center;gap:6px;
  background:color-mix(in srgb,var(--acc) 6%,var(--card));border-bottom:1px solid var(--line);color:var(--mut)}
.mm-th img{max-width:100%;max-height:100%;object-fit:contain}
.mm-th.mm-noth{font-size:38px}
.mm-th .spin{--spin-size:12px;--spin-bg:color-mix(in srgb,var(--warn) 30%,transparent);--spin-c:var(--warn)}
.mm-cb{padding:8px 10px;display:flex;flex-direction:column;gap:3px;min-width:0}
.mm-ct{overflow-wrap:anywhere}
.mm-pager{justify-content:center;gap:10px;margin-top:12px}
dialog.mm-modal{width:96vw;max-width:96vw;height:92vh;max-height:92vh;padding:10px 12px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);color:var(--fg);box-sizing:border-box}
dialog.mm-modal[open]{display:flex;flex-direction:column}
.mm-bar,.mm-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.mm-bar #mm-mode.on{background:var(--warn);color:#fff}
#mm-save.warn{box-shadow:0 0 0 2px var(--warn)}
.mm-stage{flex:1;min-height:300px;border:1px solid var(--line);border-radius:6px;overflow:hidden;position:relative;background:#fff}
#mm-off{position:fixed;left:-12000px;top:0;width:1100px;height:700px;overflow:hidden}
/* 테스트 목록 — 거르기 태그 · 고르기 */
.sim-tools{gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
/* 거르기 칩 — 체크칸은 숨기고 칩 자체가 켜짐/꺼짐이다(체크칸과 칩이 겹쳐 헷갈렸다) */
.chip-f{position:relative;display:inline-flex;align-items:center;box-sizing:border-box;height:28px;padding:0 12px;
  border:1px solid var(--line);border-radius:999px;font-size:var(--t-label);color:var(--mut);cursor:pointer;user-select:none}
.chip-f input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.chip-f:has(input:checked){background:color-mix(in srgb,var(--acc) 16%,transparent);border-color:var(--acc);color:var(--acc);font-weight:600}
.chip-f:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
/* '보이는 것 모두 고르기' 와 '고른 것 지우기' 를 칩과 같은 높이로 */
.sim-tools .sim-allbox{display:inline-flex;align-items:center;gap:5px;height:28px;margin:0}
.sim-tools .sim-allbox input{margin:0}
.sim-tools #sim-del-sel{height:28px;box-sizing:border-box;display:inline-flex;align-items:center}
#sim-list .sim-ck{width:26px;text-align:center}
/* 이름 — 'Nexus' 글자를 로고 색으로(밝은 화면은 주 색, 어두운 화면은 로고의 밝은 보라). 로고 그림은 파비콘·앱 설치에만 */
:root{--brand:#7923F9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand:#B08CFF}}
:root[data-theme="dark"]{--brand:#B08CFF}
/* 글꼴은 받지 않는다 — 기기에 있는 기하학 꼴을 앞에서부터(맥 Avenir Next·Futura · 윈도 Century Gothic·Trebuchet).
   로고의 각진 블록과 결이 맞는다. 이 글꼴은 그 자체로 아래에 앉으므로 따로 내리지 않는다(내리니 너무 내려왔다) */
.brand-word{color:var(--brand);font-family:"Avenir Next","Futura","Century Gothic","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  font-weight:700;letter-spacing:.02em;line-height:1}
/* 로그인 · 첫 비밀번호 — 로고를 앞에 세우고, 바탕에 로고 두 색(보라 · 파랑)을 옅게 깐다 */
body.loginpage{background:
  radial-gradient(1100px 600px at 15% 0%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
  radial-gradient(900px 500px at 100% 100%, color-mix(in srgb, #3A9AD9 16%, transparent), transparent 60%),
  var(--bg)}
.loginbox{max-width:380px;padding:28px 26px 22px;gap:12px;border-radius:16px;
  border:1px solid color-mix(in srgb, var(--brand) 18%, var(--line));
  box-shadow:0 18px 50px rgba(40,20,90,.14),0 2px 6px rgba(0,0,0,.05)}
.lb-brand{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 10px}
.lb-logo{width:72px;height:72px;border-radius:16px;filter:drop-shadow(0 6px 14px color-mix(in srgb, var(--brand) 30%, transparent))}
.loginbox .lb-l{font-weight:600}
.loginbox .in{height:42px;border-radius:10px;padding:0 12px;font-size:var(--t-body);background:var(--bg);
  border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
.loginbox .in:focus{outline:none;border-color:var(--brand);background:var(--card);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent)}
.loginbox .btn:not(.sec){height:44px;border-radius:10px;border:0;font-weight:700;font-size:var(--t-body);color:#fff;
  background:linear-gradient(135deg, var(--brand), #3A9AD9);box-shadow:0 6px 16px color-mix(in srgb, var(--brand) 28%, transparent)}
.loginbox .btn:not(.sec):hover{filter:brightness(1.06)}
.loginbox .btn.sec{height:40px;border-radius:10px}
.loginbox .lb-err,.loginbox .lb-info{border-radius:10px}
.loginbox .lb-foot{margin-top:6px;padding-top:12px;border-top:1px solid var(--line);line-height:1.6}
.mm-zoom{display:inline-flex;gap:2px;align-items:center;margin-right:6px}
.mm-zoom #mm-zreset{min-width:52px}
.mm-colors{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center}.mm-sw{width:20px;height:20px;min-height:0;padding:0;border-radius:50%;border:1px solid var(--line,#ccc);cursor:pointer}.mm-sw:hover{transform:scale(1.15)}#mm-color{width:26px;height:22px;padding:0;border:0;background:none;cursor:pointer}
/* 정보 탭 — 묶음 머리 · 줄마다 가는 선으로 갈라 읽힌다 */
.kv-h{margin:16px 0 6px;padding-bottom:4px;font-size:var(--t-body);font-weight:700;color:var(--acc);border-bottom:2px solid var(--acc-soft)}
.kv.sep{gap:0 14px;align-items:stretch}
.kv.sep>dt,.kv.sep>dd{padding:9px 0;border-bottom:1px solid var(--line)}
.kv.sep>dt{font-weight:600}
@media (max-width:760px){.kv.sep>dt{border-bottom:0;padding-bottom:0;margin-top:0}.kv.sep>dd{padding-top:2px}}
.sim-pager{justify-content:center;gap:10px;margin-top:8px}
/* 리포트 — 쓰는 중 띠 · 무엇을 쓸지 고르는 창 */
.rp-live{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;padding:9px 12px;border-radius:var(--r);
  background:color-mix(in srgb,var(--warn) 14%,transparent);font-size:var(--t-label);overflow-wrap:anywhere}
.rp-live .spin{--spin-size:14px;margin-top:2px;--spin-bg:color-mix(in srgb,var(--warn) 30%,transparent);--spin-c:var(--warn)}
.rp-live-t{flex:1;min-width:0}
.rp-bar{height:3px;margin:6px 0 4px;border-radius:2px;background:color-mix(in srgb,var(--warn) 25%,transparent);overflow:hidden}
.rp-bar i{display:block;width:30%;height:100%;background:var(--warn);animation:rpbar 1.6s ease-in-out infinite}
@keyframes rpbar{0%{transform:translateX(-100%)}100%{transform:translateX(340%)}}
.rp-h{margin:14px 0 6px;font-size:var(--t-body);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.rp-h:first-child{margin-top:0}
.rp-kinds{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.rp-kopt{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer}
.rp-kopt.on{border-color:var(--acc);background:var(--acc-soft)}
.rp-kopt input{margin-top:3px}
.rp-checks{display:flex;flex-wrap:wrap;gap:6px}
.rp-ck{display:inline-flex;align-items:center;gap:4px;padding:4px 9px;border:1px solid var(--line);border-radius:999px;
  font-size:var(--t-label);cursor:pointer}
.rp-ck:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.rp-dlg textarea{width:100%;box-sizing:border-box}
/* 해상도별 검증 — 고르는 창의 폭 · 메뉴 그룹 · 로그인 */
.rp-widths{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.rp-w{border-radius:var(--r);align-items:flex-start}
.rp-w input{margin-top:3px}
#rp-rs-url{width:100%;box-sizing:border-box}
.rp-rs-menus{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.rp-g{border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
.rp-g-h{display:flex;align-items:center;gap:4px;cursor:pointer;margin-bottom:6px}
.rp-g-items{display:flex;flex-wrap:wrap;gap:6px}
.rp-login{display:flex;flex-direction:column;gap:6px}
.rp-login input{width:100%;box-sizing:border-box}
.rp-login-f{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rp-pre-l{margin:0 0 10px;padding-left:18px;max-height:160px;overflow:auto;font-size:13px}
.rp-pre-l li{margin:2px 0;overflow-wrap:anywhere}
.rp-auth details{display:flex;flex-direction:column;gap:6px}
.rp-auth details[open]>label{display:block;margin-top:6px}
a.rs-open{font-weight:600}
/* 해상도별 검증 결과 — 폭 탭 · 메뉴×폭 격자 · 크게 보기 */
.rs-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.rs-tab{display:inline-flex;align-items:center;gap:6px;background:var(--card);color:var(--fg);border-color:var(--line)}
.rs-tab.on{background:var(--acc-soft);border-color:var(--acc);color:var(--acc)}
.rs-tab.off{opacity:.45}
.rs-who{font-size:var(--t-badge);color:var(--mut);max-width:9em;overflow:hidden;text-overflow:ellipsis}
.rs-n.bad{background:var(--bad);color:#fff}
.rs-only{display:inline-flex;align-items:center;gap:5px;margin:0 0 8px}
.rs-grid{display:flex;flex-direction:column;gap:12px}
.rs-row-h{margin-bottom:6px}
.rs-cells{display:flex;flex-wrap:wrap;gap:8px}
.rs-cell{display:flex;flex-direction:column;width:132px;border:2px solid var(--line);border-radius:var(--r);overflow:hidden;
  color:var(--fg);text-decoration:none;background:var(--card)}
.rs-cell:hover{border-color:var(--acc)}
.rs-cell.bad{border-color:var(--bad)}
.rs-cell img{display:block;width:100%;height:150px;object-fit:cover;object-position:top;background:#fff}
.rs-noshot{display:flex;align-items:center;justify-content:center;height:150px;color:var(--mut);font-size:var(--t-label)}
.rs-cap{padding:3px 7px;font-size:var(--t-label);display:flex;gap:6px;justify-content:space-between}
dialog.rs-big{width:min(1400px,96vw);max-width:96vw;height:92vh}
.rs-issues{margin:0 0 8px;padding-left:18px;font-size:var(--t-label)}
.rs-issues li.bad{color:var(--bad)}.rs-issues li.ok{color:var(--ok,#15803d)}
.rs-big-pic{overflow:auto;background:repeating-conic-gradient(#eee 0 25%,#fff 0 50%) 0 0/16px 16px;border:1px solid var(--line);border-radius:6px}
.rs-big-pic img{display:block;max-width:100%;margin:0 auto}
dialog.rs-big.actual .rs-big-pic img{max-width:none}
@media (max-width:760px){.rs-cell{width:calc(50% - 4px)}}

/* 설정 — codex 설치 안내(OS 별 접힘) */
.cx-install { margin-top: 10px; display: grid; gap: 6px; }
.cx-os { border: 1px solid var(--line, #ddd); border-radius: 8px; padding: 6px 10px; }
.cx-os > summary { cursor: pointer; font-weight: 600; }
.cx-steps { margin: 6px 0 4px; padding-left: 1.4em; display: grid; gap: 6px; }
.cx-steps code { display: inline-block; margin-top: 2px; padding: 2px 6px; border-radius: 4px;
  background: var(--code-bg, rgba(127,127,127,.12)); overflow-wrap: anywhere; user-select: all; }
.cx-sb { margin-top: 10px; border: 1px solid var(--line, #ddd); border-left: 3px solid var(--warn, #c80); border-radius: 8px; padding: 8px 10px; }
.cx-sb .cx-steps code { white-space: pre-wrap; }
/* 정보 탭 — codex 를 어떻게 부르나(수정 허용 · 모델 · 생각 깊이) */
.cx-mode { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 6px 0; }
.cx-mode select { max-width: 100%; }
/* codex 표지 · 강조 — 정보 탭 · 새 프로젝트 · 설정 카드 */
:root { --cx-mark: #10a37f; --cx-mark-fg: #fff; --cx-tint: rgba(16,163,127,.07); }
.cx-mark { display: inline-flex; align-items: center; gap: 5px; color: var(--cx-mark); vertical-align: -2px; }
.cx-mark b { color: var(--fg); font-weight: 700; letter-spacing: .2px; }
.cx-dt { white-space: nowrap; }
.cx-dd { border: 1px solid var(--cx-mark); border-left-width: 4px; border-radius: 8px; padding: 8px 10px; background: var(--cx-tint); }
.cx-card { border-top: 3px solid var(--cx-mark); }
/* Claude 표지 — codex 표지와 짝 */
:root { --cl-mark: #d97757; --cl-mark-fg: #fff; }
.cl-mark { display: inline-flex; align-items: center; gap: 5px; color: var(--cl-mark); vertical-align: -2px; }
.cl-mark b { color: var(--fg); font-weight: 700; letter-spacing: .2px; }
.cl-card { border-top: 3px solid var(--cl-mark); }
.cx-card h2 .cx-mark svg { width: 20px; height: 20px; }
.badge.cx-tag { background: var(--cx-mark); color: #fff; }
/* 세션 모델 바꾸기 — 모델 꼬리표 옆 작은 고르기 */
.sess-model-pick { font-size: var(--t-small, 12px); padding: 1px 4px; height: auto; width: auto; max-width: 9em; }
/* Claude Code · codex 카드 — 긴 경로 · 명령이 폰 폭에서 밖으로 나가지 않게 */
#claude-card code, #codex-card code, #cx-sb code { overflow-wrap: anywhere; word-break: break-all; }
/* 리포트 — 쓰는 중 글이 바뀌어도 표 · 띠가 흔들리지 않게(실측 2026-11-04) */
.rp-oneline { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rp-live .rp-live-t { min-width: 0; }
#rp-live-more { flex: none; align-self: center; }
@media (min-width: 721px) {
  #rp-list { table-layout: fixed; width: 100%; }
  #rp-list tr.hdr th:nth-child(1) { width: 13%; }   /* 언제 */
  #rp-list tr.hdr th:nth-child(2) { width: 24%; }   /* 리포트 */
  #rp-list tr.hdr th:nth-child(3) { width: 33%; }   /* 결과 */
  #rp-list tr.hdr th:nth-child(4) { width: 10%; }   /* 추정 비용 */
  #rp-list tr.hdr th:nth-child(5) { width: 10%; }   /* 소요 시간 */
  #rp-list tr.hdr th:nth-child(6) { width: 10%; }
  #rp-list td { overflow-wrap: anywhere; }
}
.rp-prog-dlg { width: min(640px, 94vw); }

#rp-list .num { text-align: right; white-space: nowrap; }

/* 가져오기 작업 — 뒤에서 도는 계획 · 가져오기의 단계 (impjob) */
.imp-job{border-left:3px solid var(--acc)}
.imp-job.failed,.imp-job.lost{border-left-color:var(--bad)}
.imp-job h2{display:flex;align-items:center;gap:8px}
.imp-job .spin{display:none;--spin-bg:rgba(120,140,136,.35)}
.imp-job.running .spin{display:inline-block}
.imp-steps{margin:0;padding-left:20px}
.imp-steps li{color:var(--mut);margin:2px 0}
.imp-steps li.ok{color:var(--fg)}
.imp-steps li.ok::marker{content:"✔  "}
.imp-steps li.now{color:var(--fg);font-weight:600}
.imp-job.failed .imp-steps li.now,.imp-job.lost .imp-steps li.now{color:var(--bad)}

/* git 접속 안내 — 받기 전에 무엇을 먼저 설정할지 (gitaccess) */
.git-dup{margin-top:8px;padding:10px 12px;border:1px solid var(--warn);border-radius:8px;
  background:color-mix(in srgb,var(--warn) 10%,transparent)}
.git-dup ul{margin:6px 0;padding-left:20px}
.git-help{margin-top:8px;padding:10px 12px;border:1px solid var(--bad);border-radius:8px;
  background:color-mix(in srgb,var(--bad) 6%,var(--card))}
.git-help ol{margin:6px 0 8px;padding-left:20px}
.git-help li{margin:3px 0}
.git-help pre{margin:4px 0 8px;max-height:9em;overflow:auto}

.git-help ol.git-steps > li{margin:6px 0;line-height:1.55}
.git-help ol.git-sub{margin:4px 0 2px;padding-left:22px;list-style:lower-alpha}
.git-cmd{display:flex;gap:6px;align-items:center;margin:2px 0}
.git-cmd pre{flex:1;min-width:0;margin:0;padding:6px 10px;white-space:pre-wrap;word-break:break-all;height:auto}
.git-token{margin:8px 0 10px;padding:9px 11px;border:1px solid var(--acc);border-radius:8px;background:color-mix(in srgb,var(--acc) 7%,var(--card))}

/* 기억 탭의 Git 칸 — 커밋 나무. 왼쪽 SVG 가 갈래(색 = 칸) · 원(큰 속 빈 원 = 합침)을, 줄은 그 오른쪽에 같은 높이로 선다 */
.git-tree{position:relative;font-size:var(--t-mono);overflow:auto;max-height:70vh;
  border:1px solid var(--line);border-radius:8px}
.git-svg{position:absolute;left:0;top:0;pointer-events:none}
.git-edge{fill:none;stroke-width:2}
.git-dot{stroke-width:2}
.git-dot.dim{opacity:.25}
.git-line{display:flex;align-items:center;gap:8px;white-space:nowrap;padding-right:10px;height:26px;cursor:pointer}
.git-line:hover,.git-line:focus,.git-line.on{background:color-mix(in srgb,var(--acc) 12%,transparent);outline:none}
.git-line.dim{opacity:.35}
.git-who{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;
  color:#fff;font-size:11px;font-weight:700;flex:none;vertical-align:middle}
.git-h{color:var(--mut);flex:none;font-family:var(--mono)}
.git-s{overflow:hidden;text-overflow:ellipsis;min-width:0}
.git-w{flex:none;margin-left:auto;padding-left:12px}
.git-ref{font-size:.85em;flex:none}
.git-ref.head{background:color-mix(in srgb,var(--acc) 25%,var(--card));color:var(--fg)}
.git-ref.local{background:color-mix(in srgb,var(--ok) 20%,var(--card));color:var(--fg)}
.git-ref.remote{background:color-mix(in srgb,var(--mut) 18%,var(--card));color:var(--fg)}
.git-ref.tag{background:color-mix(in srgb,var(--warn) 25%,var(--card));color:var(--fg)}
.git-msg{height:auto;white-space:pre-wrap;max-height:260px}
@media (max-width:700px){.git-w{display:none}}

/* 프로젝트 루트 — 설정 화면에서 폴더를 골라 더하고 뺀다 */
ul.roots{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px}
ul.roots li{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
dialog.roots-dlg{width:min(640px,94vw);padding:0;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg)}
dialog.roots-dlg form{padding:16px;display:flex;flex-direction:column;gap:10px}
dialog.roots-dlg h2{margin:0}
ul.roots-list{list-style:none;margin:0;padding:4px;border:1px solid var(--line);border-radius:6px;
  height:min(46vh,360px);overflow-y:auto}
ul.roots-list li{padding:1px 0}
ul.roots-list .roots-dir{display:block;width:100%;text-align:left;background:none;border:0;color:var(--fg);
  padding:6px 8px;border-radius:5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.roots-list .roots-dir:hover{background:var(--acc-soft);color:var(--acc)}

/* 단계 패널 — 터미널 왼쪽 1/5. 접으면 왼쪽 위 작은 단추만 남는다 */
.steps-tog{position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:3;display:flex;align-items:center;
  justify-content:center;width:22px;height:48px;padding:0;min-height:0;border-radius:0 12px 12px 0;
  background:rgba(255,255,255,.07);color:#e6efed;cursor:pointer;font:inherit;border:1px solid rgba(215,227,224,.22);border-left:0;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.steps-tog:hover{background:rgba(255,255,255,.16)}
.steps{position:absolute;top:0;left:0;bottom:9px;width:20%;min-width:180px;z-index:2;box-sizing:border-box;
  overflow:auto;padding:44px 12px 10px;background:var(--term-bg);color:var(--term-fg);
  border-right:1px solid rgba(215,227,224,.14);font-size:var(--t-label);line-height:1.5}
#termwrap.steps-open .term{margin-left:max(20%,180px)}
/* 펴고 접을 때 왼쪽에서 미끄러진다 — 터미널도 같이 비킨다 */
.steps{transform:translateX(-100%);opacity:0;transition:transform .25s ease,opacity .25s ease}
#termwrap.steps-open .steps{transform:none;opacity:1}
#termwrap .term{transition:margin-left .25s ease}
@media (prefers-reduced-motion:reduce){.steps,#termwrap .term{transition:none}}
.steps-h{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.steps-n{opacity:.65}
/* 위 44px 는 '처리 중' 띠 자리 — 펼치기 단추 · 패널 머리를 그 아래에 둔다 */
.steps-x{display:none;position:absolute;top:50%;left:calc(max(20%,180px) - 12px);transform:translateY(-50%);z-index:3;
  width:24px;height:48px;min-height:0;padding:0;align-items:center;justify-content:center;border-radius:12px;
  background:var(--term-bg);color:var(--term-fg);border:1px solid rgba(215,227,224,.28);cursor:pointer;font:inherit}
.steps-x:hover{background:#1d2a28}
#termwrap.steps-open .steps-x{display:flex}
.steps-list{margin:0;padding:0;list-style:none}
.step{display:flex;gap:8px;align-items:flex-start;padding:4px 0}
.step-mk{flex:none;width:14px;text-align:center;font-style:normal;opacity:.7}
.step.completed{opacity:.55}
.step.completed .step-mk{color:#5eead4;opacity:1}
.step.in_progress{font-weight:600}
.step.in_progress .step-mk{width:11px;height:11px;margin:4px 1px 0;border-radius:50%;opacity:1;
  border:2px solid rgba(230,239,237,.3);border-top-color:#5eead4;animation:nx-spin .8s linear infinite}
@media (max-width:700px){
  .steps{width:78%;box-shadow:4px 0 16px rgba(0,0,0,.4)}
  .steps-x{left:calc(78% - 12px)}
  #termwrap.steps-open .term{margin-left:0}
}

/* F57 — 세션 탭 · 세션 정보 줄 */
/* 첫 탭의 왼쪽 선이 머리줄 왼쪽 선과 딱 맞게 — 안쪽 여백 없음(2px 안쪽에서 시작해 어긋나 보였다, 사람이 지적 2026-11-06) */
.sess-tabs{display:flex;gap:4px;align-items:flex-end;padding:0;margin-bottom:-1px}
.sess-list{display:flex;gap:4px;align-items:flex-end;flex:1 1 auto;min-width:0;overflow:hidden}
/* 고른 탭 — 위 강조색 줄 · 굵게 · 아래 머리줄과 같은 바탕으로 이어진다. 안 고른 탭은 투명 · 흐리게(어두운 테마에서
   고른 탭을 터미널 바탕으로 칠했더니 안 고른 카드 바탕 탭이 골라진 것처럼 보였다, 실측 2026-11-05) */
.sess-tab{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;min-height:0;border:1px solid transparent;
  border-bottom:0;border-top:2px solid transparent;border-radius:8px 8px 0 0;background:transparent;color:var(--mut);
  font:inherit;font-size:var(--t-label);text-decoration:none;white-space:nowrap;cursor:pointer}
.sess-tab:hover{color:var(--fg);background:var(--acc-soft)}
.sess-tab.on{background:var(--card);color:var(--fg);border-color:var(--line);border-top-color:var(--acc);font-weight:700}
.sess-tab.sess-add{border:1px dashed var(--line);border-bottom:0}
.sess-go-now{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sess-go-now input{width:auto}
.sess-dot{width:7px;height:7px;border-radius:50%;background:var(--line);flex:none}
.sess-tab.st-running .sess-dot{background:var(--ok,#16a34a)}
.sess-tab.st-failed .sess-dot,.sess-tab.st-missing .sess-dot{background:var(--bad,#dc2626)}
.sess-tab.st-unknown .sess-dot{background:#d97706}
.sess-info{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:6px 10px;font-size:var(--t-label);
  border:1px solid var(--line);border-bottom:0;background:var(--card)}
.sess-info .sp{flex:1}
.sess-task{max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sess-info .mono{overflow-wrap:anywhere}
dialog.sess-modal{width:min(560px,94vw);max-width:94vw}
.sess-body{display:flex;flex-direction:column;gap:4px}
.sess-body > p{margin:0 0 6px}
.sess-body label{margin-top:8px}
.sess-body input,.sess-body textarea{width:100%;box-sizing:border-box}
/* 에이전트가 쉬면 하는 중 단계는 멈춤 — 돌지 않는다 */
.steps-list.paused .step.in_progress .step-mk{animation:none;border:0;width:14px;height:auto;margin:0}
.steps-list.paused .step.in_progress .step-mk::before{content:"⏸"}
#sess-base-row{display:flex;flex-direction:column;gap:4px}
/* 탭 점 — 처리 중이면 돈다, 답을 기다리면 주황, 명령 대기면 초록(멈춤), 꺼지면 회색 */
.sess-tab[data-work=busy] .sess-dot{background:transparent;border:2px solid rgba(94,234,212,.3);border-top-color:#5eead4;
  width:9px;height:9px;box-sizing:border-box;animation:nx-spin .8s linear infinite}
.sess-tab[data-work=ask] .sess-dot{background:#d97706}
.sess-tab[data-work=idle] .sess-dot{background:var(--ok,#16a34a)}
.sess-tab[data-work=""] .sess-dot{background:var(--line)}
@media (prefers-reduced-motion:reduce){.sess-tab[data-work=busy] .sess-dot{animation-duration:2.4s}}
/* 세션 마무리 · 물음 표지 — 한 탭에 하나(data-flag 는 화면이 차례대로 하나만 단다). 글은 ::after 로 — 탭 글자 노드는 제목 고치기가 쓴다.
   깜빡임은 머리줄 불빛의 dot-ask 를 그대로 쓴다(새 keyframes 를 만들지 않는다) */
.sess-tab[data-flag^=ask] .sess-dot,.sess-more-item[data-flag^=ask] .sess-dot{background:#d97706;border:0;width:8px;height:8px;
  animation:dot-ask 1.2s ease-in-out infinite}
.sess-tab[data-flag^=ask]{border-top-color:#d97706}
.sess-tab[data-flag=run] .sess-dot{background:transparent;border:2px solid rgba(94,234,212,.3);border-top-color:#5eead4;
  width:9px;height:9px;box-sizing:border-box;animation:nx-spin .8s linear infinite}
.sess-tab[data-flag]:not([data-flag=""])::after,.sess-more-item[data-flag]:not([data-flag=""])::after{
  font-size:11px;font-weight:600;white-space:nowrap}
.sess-tab[data-flag=ask-choose]::after,.sess-more-item[data-flag=ask-choose]::after{content:"❓ 묻는 중";color:#d97706}
.sess-tab[data-flag=ask-text]::after,.sess-more-item[data-flag=ask-text]::after{content:"❓ 물음(추정)";color:#d97706}
.sess-tab[data-flag=run]::after,.sess-more-item[data-flag=run]::after{content:"마무리 중";color:var(--mut)}
.sess-tab[data-flag=blocked]::after,.sess-more-item[data-flag=blocked]::after{content:"✖ 마무리 못 함";color:var(--bad)}
.sess-tab[data-flag=cand]::after,.sess-more-item[data-flag=cand]::after{content:"🏁 후보";color:var(--ok)}
.sess-more-btn.has-ask{border-top:2px solid #d97706}
.sess-more-btn.has-ask::before{content:"❓";margin-right:2px}
@media (prefers-reduced-motion:reduce){.sess-tab[data-flag^=ask] .sess-dot,.sess-more-item[data-flag^=ask] .sess-dot{animation:none}
  .sess-tab[data-flag=run] .sess-dot{animation-duration:2.4s}}
/* 폰 폭 — 표지는 기호만(탭이 넘쳐 더보기로 밀리지 않게) */
@media (max-width:760px){
  .sess-tab[data-flag^=ask]::after{content:"❓"}
  .sess-tab[data-flag=run]::after{content:"⏳"}
  .sess-tab[data-flag=blocked]::after{content:"✖"}
  .sess-tab[data-flag=cand]::after{content:"🏁"}
}
.sess-finish-say{overflow-wrap:anywhere;max-width:100%}
.badge.sess-cand{background:color-mix(in srgb,var(--ok) 14%,transparent);color:var(--ok)}
.finish-lines{margin:4px 0;padding-left:18px;line-height:1.6;font-size:var(--t-label)}
.finish-lines li{overflow-wrap:anywhere}
.finish-lines .finish-commit{list-style:none;margin-left:-4px;color:var(--mut)}
.finish-why{overflow-wrap:anywhere}
.finish-ask{border-left:3px solid #d97706;padding:6px 10px;background:var(--acc-soft);border-radius:4px}
.finish-ask p{margin:0 0 6px}
.finish-q{overflow-wrap:anywhere;font-style:italic}
.finish-ask input{width:auto;margin-right:4px}
.sess-pick{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.sess-pick label{display:flex;flex-direction:column;gap:4px}
.sess-pick select{width:100%}
@media (max-width:480px){.sess-pick{grid-template-columns:1fr}}

/* F58 — 멀티 작업 중앙 화면 */
.run-view #termwrap,.run-view #console,.run-view .termhead,.run-view #sess-info{display:none}
.run-board{display:flex;flex-direction:column;gap:8px;border-radius:0 var(--r) var(--r) var(--r)}
.run-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.run-head .sp{flex:1}
.run-goal{margin:0;line-height:1.6}
.run-needs{border-left:3px solid #d97706;padding:6px 10px;background:var(--acc-soft)}
.run-needs ul{margin:4px 0 0;padding-left:18px}
.run-tasks{width:100%;border-collapse:collapse;font-size:var(--t-label)}
.run-tasks th,.run-tasks td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.run-tasks tr.rt-merged .rt-badge{color:var(--ok)}
.run-tasks tr.rt-failed .rt-badge,.run-tasks tr.rt-conflict .rt-badge{color:var(--bad)}
.run-tasks tr.rt-needs_user .rt-badge{color:#d97706}
.run-summary{white-space:pre-wrap;margin:0;padding:10px;background:var(--term-bg);color:var(--term-fg);border-radius:var(--r);font-size:var(--t-label)}
#run-state[data-state=done]{color:var(--ok)}
#run-state[data-state=failed]{color:var(--bad)}
#run-state[data-state=needs_user]{color:#d97706}
.multi-tasks{margin:6px 0;padding-left:20px;line-height:1.7}
/* 멀티 — 나누기 제안을 기다리는 동안 */
.multi-busy{position:relative;display:flex;align-items:center;gap:12px;margin:12px 0 2px;padding:12px 14px 16px;
  border:1px solid var(--line);border-radius:10px;background:var(--acc-soft);overflow:hidden}
.multi-busy[hidden]{display:none}
.multi-busy .spin{--spin-size:20px;--spin-w:2.5px}
.multi-busy .mb-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.multi-busy .mb-text b{color:var(--acc);font-size:14px}
.multi-busy .mb-text .mut{font-size:12.5px}
.multi-busy .mb-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.multi-busy .mb-bar i{position:absolute;top:0;bottom:0;width:35%;border-radius:3px;background:var(--acc);
  animation:mb-flow 1.6s ease-in-out infinite}
@keyframes mb-flow{0%{left:-35%}100%{left:100%}}
#multi-plan.is-busy{display:inline-flex;align-items:center;gap:8px}
#multi-plan.is-busy::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid currentColor;
  border-right-color:transparent;animation:nx-spin .8s linear infinite}
#multibox textarea[readonly]{opacity:.65}
@media (prefers-reduced-motion:reduce){#multi-plan.is-busy::before{animation-duration:2.4s}
  .multi-busy .mb-bar i{animation:none;left:0;width:100%;opacity:.5}}
.sess-tab.sess-run{border:1px solid var(--line);border-bottom:0}
@media (max-width:700px){.run-tasks th:nth-child(2),.run-tasks td:nth-child(2){display:none}}

/* F59 — git 관문 모달 */
dialog.wd-modal.gate-modal{width:min(720px,94vw)}
.gate-cmd{white-space:pre-wrap;word-break:break-all;max-height:9em;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:6px;margin:6px 0}
.gate-items{list-style:none;padding:0;margin:8px 0}
.gate-items li{padding:3px 0;line-height:1.45;overflow-wrap:anywhere}
.gate-items .gi-mark{display:inline-block;width:1.4em}
.gate-items .gi-ok .gi-mark{color:var(--ok)}
.gate-items .gi-warn .gi-mark,.gate-items .gi-warn b{color:var(--warn)}
.gate-items .gi-block .gi-mark,.gate-items .gi-block b{color:var(--bad)}
.gate-commits{margin:6px 0}
.gate-list{max-height:16em;overflow:auto;padding-left:1.2em;margin:4px 0}
.gate-out{white-space:pre-wrap;max-height:10em;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:6px}

/* F58 — 자동 작업 세션 잠금 */
.console .inpwrap{position:relative}
/* 입력칸 한가운데를 덮는다 — 높이는 화면이 입력칸에 맞춘다(끌어서 바꿔도 따라간다) */
.sess-auto{position:absolute;left:0;right:0;top:0;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;
  flex-wrap:wrap;padding:8px 14px;text-align:center;border:1px dashed var(--acc);border-radius:var(--r);
  background:color-mix(in srgb, var(--acc-soft) 88%, transparent);backdrop-filter:blur(1.5px);font-size:13px;line-height:1.45}
.sess-auto span{max-width:60ch}
.cell-take{margin-left:6px}

/* 세션 탭과 머리줄을 한 덩어리로 — 고른 탭이 머리줄과 같은 테두리 · 바탕으로 이어지고, 강조색은 탭 위 줄 하나만.
   전에는 탭(둥근 위 모서리 · 위 강조줄)과 머리줄(둥근 왼쪽 위 · 왼쪽 3px 띠)이 곡선 둘로 겹쳐 보였다(사람이 지적 2026-11-06).
   탭 · ＋ · 🎛 · 더보기는 **같은 높이**다 — 단추(＋ 🎛)가 링크(탭)보다 커서 아래로 튀고, 고른 탭만 아래로 늘여 덮었더니
   탭 줄에 세로 스크롤이 생겼다. 고른 탭은 늘이지 않고 탭 줄 전체의 -1px 겹침으로 머리줄 윗줄을 덮는다 */
#tp-terminal .pbar.termhead{border-left:1px solid var(--term-edge);border-top-left-radius:0}
.sess-tab{box-sizing:border-box;height:32px;line-height:1;flex:none}
.sess-tab.on{position:relative;z-index:1;border-color:var(--term-edge);border-top:2px solid var(--acc);border-radius:7px 7px 0 0}
.sess-tab.on .sess-dot{box-shadow:0 0 0 2px var(--card)}
.sess-tab.sess-add{width:40px;justify-content:center;padding:0}
.sess-tab.sess-over{display:none}
.sess-more{position:relative;flex:none}
.sess-more-btn{color:var(--fg);border:1px solid var(--line);border-bottom:0}
.sess-more-menu{position:absolute;right:0;top:100%;z-index:40;min-width:200px;max-height:60vh;overflow:auto;display:flex;flex-direction:column;
  gap:2px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.sess-more-menu[hidden]{display:none}
.sess-more-item{display:flex;align-items:center;gap:6px;padding:7px 10px;border-radius:6px;color:var(--fg);text-decoration:none;
  font-size:var(--t-label);white-space:nowrap}
.sess-more-item:hover,.sess-more-item:focus{background:var(--acc-soft)}
/* 추가 세션을 고르면 탭 아래에 세션 정보 줄이 낀다 — 같은 테두리로 감싸 탭 · 정보 줄 · 머리줄 · 터미널이 한 덩어리가 된다 */
#tp-terminal .sess-info{background:var(--card);border:1px solid var(--term-edge);border-bottom:0;
  border-radius:0 var(--r) 0 0;margin:0}
#tp-terminal .sess-info + .pbar.termhead,#tp-terminal .sess-info ~ .pbar.termhead{border-top-right-radius:0}
.sess-more-item.st-running .sess-dot{background:var(--ok,#16a34a)}
.sess-more-item.st-failed .sess-dot,.sess-more-item.st-missing .sess-dot{background:var(--bad,#dc2626)}
.sess-more-item.st-unknown .sess-dot{background:#d97706}
.sess-plus-wrap .sess-more-menu{min-width:240px}
button.sess-more-item{width:100%;border:0;background:transparent;font:inherit;cursor:pointer;text-align:left;
  flex-direction:column;align-items:flex-start;gap:2px;height:auto}
button.sess-more-item b{font-size:var(--t-label)}
button.sess-more-item .mut{font-size:var(--t-badge)}

/* 멀티 작업 — 멈춘 까닭 · 추가 지시 */
.run-why{border-left:3px solid var(--acc);padding:8px 12px;background:var(--acc-soft);border-radius:0 var(--r) var(--r) 0}
.run-why ul{margin:6px 0 0;padding-left:18px;line-height:1.55}
.run-why li{margin:4px 0;overflow-wrap:anywhere}
.run-more textarea{width:100%;box-sizing:border-box;margin-top:4px}
.run-tasks tr.rt-skipped .rt-badge{color:var(--mut)}

/* 멀티 작업 이력 — 실행마다 카드 */
#runhist{width:min(820px,94vw)}
.rh-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rh-item{display:flex;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.rh-item:hover{border-color:var(--acc)}
.rh-main{flex:1;min-width:0}
.rh-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rh-st{white-space:nowrap}
.rh-done .rh-st{color:var(--ok)} .rh-failed .rh-st,.rh-needs_user .rh-st{color:var(--warn)} .rh-discarded .rh-st{color:var(--mut)}
.rh-goal{margin:4px 0 0;line-height:1.45;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.rh-act{display:flex;gap:6px;flex:none}
.rh-act .btn,.rh-act button{white-space:nowrap}
.rh-del{background:transparent;color:var(--bad);border:1px solid var(--bad)}
.rh-del:hover{background:var(--bad);color:#fff}
@media (max-width:560px){.rh-item{flex-direction:column;align-items:stretch}.rh-act{justify-content:flex-end}}
/* 지우는 단추(끝내기 · 버리기)는 빨간 테두리 — 초록이면 위험해 보이지 않았다 */
#run-discard,#sess-end{background:transparent;color:var(--bad);border:1px solid var(--bad)}
#run-discard:hover,#sess-end:hover{background:var(--bad);color:#fff}
.rh-tasks{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.rh-tasks li{padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);overflow-wrap:anywhere;line-height:1.5}
.rh-tasks li.rt-merged .rt-badge{color:var(--ok)} .rh-tasks li.rt-failed .rt-badge,.rh-tasks li.rt-conflict .rt-badge{color:var(--bad)}
#runhist-detail .run-summary{max-height:40vh;overflow:auto}
.botrow.run-only{grid-template-columns:1fr}

/* 모아보기 칸의 세션 고르기 — 작은 알약 단추 · 직접 그린 메뉴(기본 드롭박스는 뚱뚱했다) */
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;white-space:nowrap}
.cs{position:relative;display:inline-flex}
.cs-btn{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 6px 0 10px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--fg);font-size:var(--t-label);font-weight:500;line-height:1;cursor:pointer;max-width:220px}
.cs-btn:hover,.cs-btn[aria-expanded=true]{border-color:var(--acc)}
.cs-btn.auto{border-style:dashed;border-color:var(--acc)}
.cs-cur{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-n{padding:2px 6px;border-radius:999px;background:var(--acc-soft);color:var(--acc);font-size:var(--t-badge);font-weight:600}
.cs-car{color:var(--mut);font-size:10px}
.cs-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:180px;max-width:280px;max-height:260px;overflow:auto;
  padding:4px;border:1px solid var(--line);border-radius:10px;background:var(--card);box-shadow:0 8px 24px rgba(0,0,0,.14);display:flex;flex-direction:column}
.cs-menu[hidden]{display:none}
.cs-it{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:6px;background:transparent;color:var(--fg);
  font-size:var(--t-label);text-align:left;cursor:pointer}
.cs-it:hover{background:var(--acc-soft)}
.cs-it.on{font-weight:600;background:var(--acc-soft)}
.cs-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--mut);opacity:.5}
.cs-dot.on{background:var(--ok);opacity:1}
.cs-tag{font-size:var(--t-badge);padding:1px 6px;border-radius:999px;background:var(--acc-soft);color:var(--acc)}
.cs-tag.mut{background:transparent;color:var(--mut)}
.cs-note{font-size:var(--t-label);color:var(--warn);padding:1px 8px;border:1px solid currentColor;border-radius:999px}

/* 사용량 — 프로젝트 × 날짜. 칸 진하기는 그 줄의 가장 큰 날 대비(색은 하나 — 재는 것이다) */
.ugrid-wrap{overflow-x:auto;max-width:100%}
.ugrid td:first-child,.ugrid th:first-child{position:sticky;left:0;background:var(--card);z-index:1}
@media (max-width:640px){.ugrid th,.ugrid td{padding:4px 5px}}
.ugrid{border-collapse:collapse;font-size:var(--t-label);min-width:100%}
.ugrid th,.ugrid td{padding:5px 7px;border-bottom:1px solid var(--line);white-space:nowrap}
.ugrid th{color:var(--mut);font-weight:500}
.ugrid td.ug{background:color-mix(in srgb, var(--acc) calc(var(--p) * 0.55%), transparent)}
.ugrid td.ug.z{color:var(--mut)}

/* 모아보기 배치 — 묶음(프로젝트) · 접기 · 펼치기 · 끌기 */
.cgroup{min-width:0;display:flex;flex-direction:column}
.cgroup>.cell{flex:1}
.cgroup.open{grid-column:1/-1;padding:6px;border:1px solid color-mix(in srgb, var(--pc) 45%, var(--line));border-radius:calc(var(--r) + 4px);
  background:color-mix(in srgb, var(--pc) 6%, transparent)}
.cgroup.open .cg-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.cgroup.dragging{opacity:.45}
.grid-tools{margin:0 0 8px;justify-content:flex-end;gap:10px}
.grid2.folded-all .term,.grid2.folded-all .ft,.grid2.folded-all .nxterm{display:none}
.grid2.folded-all .cell .hd{border-bottom:0}
.cell .c-drag{cursor:grab;color:var(--mut);font-size:14px;line-height:1;padding:2px 2px 2px 0;user-select:none}
.cell .c-drag:active{cursor:grabbing}
.cell.sub .hd .nm{font-weight:600}
@media (max-width:760px){.cgroup.open .cg-in{grid-template-columns:1fr}}
.cell .hd .nm{white-space:nowrap;flex:none}
.cell .hd .pt{min-width:0}

/* 모니터링 모드 — 태블릿에 늘 켜 둔다. 메뉴 · 머리 바 없이, 켜진 터미널은 화면 폭에 맞춰 칸 수가 바뀐다(가로 · 세로) */
body.monitor .top{display:none}
body.monitor .wrap{padding:10px 12px 18px;max-width:none}
body.monitor .grid2{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
/* 펼친 묶음 안의 세션 칸도 다른 칸과 같은 폭 기준 — 좁게 잡아 내용이 안 보였다(사람이 지적 2026-11-06) */
body.monitor .cgroup.open .cg-in{grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
body.monitor .cell .term{height:clamp(170px,30vh,460px)}
@media (orientation:portrait){body.monitor .cell .term{height:clamp(170px,24vh,380px)}}
.mon-off{margin:14px 0 0}
.mon-off h2{margin:0 0 6px}
.mon-offs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:8px}
.off-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--pc);border-radius:var(--r);min-width:0}
.off-item .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.off-item form{margin:0}
.mon-foot{display:flex;justify-content:center;margin:22px 0 4px}
.top .btn.top-ico{margin-left:-4px;font-size:20px;line-height:1;text-decoration:none;padding:4px 6px;border-radius:var(--r);background:transparent;border:0;box-shadow:none;color:inherit;min-height:0}
.top .btn.top-ico:hover{background:var(--acc-soft)}
/* 모니터링 머리 — 한 줄, 왼쪽부터. 오른쪽 위는 태블릿 물리 단추 자리라 비운다 */
.mon-bar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;overflow:hidden;padding-right:96px;margin:0 0 8px}
.mon-bar .resbar,.mon-bar .grid-tools{margin:0;flex:none;flex-wrap:nowrap;justify-content:flex-start}
.mon-bar .resbar .res .mut{display:none}
.mon-foot{gap:10px}
/* 모아보기 위쪽 줄의 '자동 따라가기' — 옆 단추와 같은 높이의 알약, 안의 체크 상자는 가운데 맞춘다(위로 튀어나갔다) */
.grid-tools .gt-check{display:inline-flex;align-items:center;gap:6px;height:25px;padding:0 10px 0 8px;margin:0;border:1px solid var(--line);
  border-radius:999px;background:var(--card);color:var(--fg);cursor:pointer;user-select:none;line-height:1}
.grid-tools .gt-check:hover{border-color:var(--acc)}
.grid-tools .gt-check input{appearance:none;-webkit-appearance:none;width:15px;height:15px;margin:0;flex:none;border:1.5px solid var(--mut);
  border-radius:4px;background:var(--card);display:grid;place-content:center;cursor:pointer}
.grid-tools .gt-check input::after{content:"";width:8px;height:5px;border:2px solid var(--acc-fg);border-top:0;border-right:0;
  transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.grid-tools .gt-check input:checked{background:var(--acc);border-color:var(--acc)}
.grid-tools .gt-check input:checked::after{opacity:1}
.grid-tools .gt-check:has(input:checked){border-color:var(--acc);color:var(--acc)}
.grid-tools .gt-check input:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:760px),(pointer:coarse){.grid-tools .gt-check{height:34px}.top .btn.top-ico{min-height:34px;min-width:34px;display:inline-flex;align-items:center;justify-content:center}}
/* 모니터링 — 칸 오른쪽 위의 빠른 단추(세로, 반투명). 처리 중이거나 터미널을 접으면 숨는다 */
.grid2 .cell{position:relative}
.mon-acts{position:absolute;right:10px;top:50px;z-index:3;display:flex;flex-direction:column;gap:4px;opacity:.55;transition:opacity .15s}
.mon-acts:hover,.mon-acts:focus-within{opacity:1}
/* 글 위에 겹치니 작게(사람이 정함 2026-11-13) */
.mon-acts .ma{min-width:0;min-height:22px;padding:1px 7px;line-height:1.3;border-radius:6px;border:1px solid rgba(255,255,255,.35);
  background:rgba(20,30,28,.72);color:#e6efed;font-size:11px;cursor:pointer;backdrop-filter:blur(2px)}
.mon-acts .ma:active{transform:translateY(1px)}
.cell:has(.work.w-busy) .mon-acts,.grid2.folded-all .mon-acts{display:none}
.mon-memo-list{margin:0;padding:0 0 0 1.2em;max-height:60vh;overflow:auto;display:flex;flex-direction:column;gap:10px}
.mon-memo-list .mm-t{white-space:pre-wrap;word-break:break-word}
/* 칸이 긴 터미널 줄에 밀려 넓어지지 않게 — 오른쪽 끝 칸이 화면 밖으로 잘렸다(사람이 지적 2026-11-06) */
.cgroup,.cgroup>.cell,.cg-in>.cell{min-width:0;max-width:100%}
.cell .term{min-width:0}

/* 엔진 요청함 — 대시보드 카드(inbox.py) */
.inbox{margin-top:14px}
.inbox-list{list-style:none;margin:0;padding:0}
.inbox-item{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px;padding:8px 10px;margin:0 0 8px;min-width:0}
.inbox-item.done{border-left-color:var(--line);opacity:.8}
.inbox-h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.inbox-h .sec{margin-left:auto}
.inbox-t{margin-top:4px;white-space:pre-wrap;overflow-wrap:anywhere}
.inbox-done summary{cursor:pointer;margin:4px 0 8px}

/* 터미널 스트림(nx.term) — xterm 칸을 글 거울(#pane) 위에 겹친다. 붙으면 #pane 에 .under 가 달린다 */
.term-stack{position:relative}
/* 경계(사람이 정함 2026-11-12) — 창(220칸×80줄)은 칸보다 작을 수 있다. 바깥을 안쪽(xterm 바탕)보다 밝게 칠하고 가장자리에
   옅은 선을 둬 터미널이 어디까지인지 보이게 한다. 예전에는 .xterm 이 칸 폭을 채워(min-width:100%) 오른쪽 빈 곳까지 같은 검정이었다 */
.nxterm{position:absolute;inset:0;z-index:1;background:var(--term-out,#1f2927);overflow:auto;box-sizing:border-box}
.nxterm[hidden]{display:none}
/* 칸보다 넓은 줄은 칸 안에서만 옆으로 민다 — 쪽은 넘치지 않는다 */
#xterm,[id^="xt-"]{overflow-x:auto;overflow-y:auto;overscroll-behavior-x:contain}
.nxterm .xterm{width:max-content;padding:4px 0 0 6px;box-shadow:1px 1px 0 rgba(215,227,224,.22)}  /* 여백은 안쪽 — 색은 xterm 테마 바탕(nxterm.js)을 따른다. 바깥 색이면 왼쪽에 밝은 줄이 선다 */
.term.under{opacity:0;pointer-events:none}
#termwrap.steps-open .nxterm{left:max(20%,180px)}
.cell .term-stack{min-width:0}
/* 설정 '보여 주는 방식' — 고르기 둘을 한 줄에(dd 의 입력칸 100% 폭 규칙이 radio 를 한 줄씩 밀어냈다) */
#term-form label{display:inline-flex;align-items:center;gap:6px}
#term-form input[type=radio]{width:auto;margin:0}
#set-stream code{white-space:nowrap}