/* 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;
  --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);
}}
: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);
}
*{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)}

/* ── 레이아웃: 좌측 메뉴 + 본문 ───────────────────────── */
.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{flex:1;min-width:0}
.side .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{background:var(--acc-soft);color:var(--acc);
  border-color:var(--line);text-decoration:none}
.side .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{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}
dialog.drawer::backdrop{background:var(--backdrop)}
@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)}
.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.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)}
.sumonly{display:none}   /* 모바일에서만 보이는 요약 */
.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)}
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;z-index:0;pointer-events:none}
.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 .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(--mono);
  font-size: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 input{flex:1;min-width:0}

/* ── 프로젝트 화면 ───────────────────────────────────── */
.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: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}
.sel-sm,.num-sm{padding:2px 6px;font-size:var(--t-label)}
.num-sm{width:62px;text-align:right}
.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}
.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.sent{opacity:.62;border-style:dashed}
.att .sentmark{font-size:var(--t-badge);color:var(--mut);margin-left:2px}
.pbarmini{display:inline-block;width:52px;height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.pbarmini b{display:block;height:100%;background:var(--acc)}
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}
.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]):not(.num-sm),
.kv dd select,.kv dd textarea{width:100%;max-width:520px}
.kv dd .num-sm{width:84px}
/* 넓은 화면에서는 한 줄에 두 쌍씩 — 오른쪽을 비우지 않는다 */
@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}
  table.stack td[data-label="체크 항목"] .sumonly{display:inline}
  .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: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 .krow{gap:5px}
  .console .meta{gap:6px}
  .console .meta .gauge{width:100%}
  .dropzone{padding:9px 10px;gap:8px}
  .dropzone .dz-ic{width:22px;height:22px}
  .dropzone .dz-hint{display:none}
  .pbar{gap:6px}
  .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;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%}
.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}
dialog.wd-modal::backdrop{background:var(--backdrop)}
.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}   /* 파란 포커스 테두리 제거 */
.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)}
.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)}

/* 토스트 — 그 자리에서 알린다(_ask.html nx.toast). 페이지를 옮기지 않는다.
   모달 안에 넣으면 모달 기준으로 뜬다(dialog 는 position 이 잡혀 있다). */
.nx-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-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}
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)}
@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}
  .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-top:14px}
.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 - 210px);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 .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-peek{margin-top:14px;cursor:pointer;transition:border-color .12s}
.memo-peek:hover,.memo-peek:focus-visible{border-color:var(--acc);outline:0}
.memo-3{margin:7px 0 0;white-space:pre-wrap;word-break:break-word;
  font-size:var(--t-sm);line-height:1.6;color:var(--fg);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.memo-peek .label{pointer-events:none}
.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::backdrop{background:#0008}
.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){
  /* 탭 여섯 개 + 아이콘이 한 줄에 들어가야 한다. 아이콘을 숨기지 않는다 —
     v2 가 좁은 자리에서 쓰는 값(0.7rem · 0.2rem)을 그대로 쓴다. */
  .ptabs a{padding:7px 4px;font-size:11px}
  .ptabs a .mi{width:auto;margin-right:.15em;font-size:.9em}
}
/* 더 좁은 폰(360 이하)까지 여섯 개가 들어가게 한 단계 더 조인다. */
@media (max-width:400px){
  .ptabs a{padding:7px 3px;font-size:10.5px;letter-spacing:-.02em}
  .ptabs a .mi{margin-right:.1em;font-size:.85em}
  .ptabs-wrap{gap:5px}
  .pop-t{display:none}
  .tpane.frame{height:calc(100vh - 170px);min-height:360px}
  .memo-modal{width:96vw;padding:12px}
  .memo-modal textarea{min-height:52vh}
}

/* 새 창에서는 이름·경로를 상단 바가 이미 말해 준다 — 단추 줄만 얇게 */
.pbar.slim{padding:7px 10px;margin-bottom:2px}

/* 파일 트리 — 줄줄이 나열하면 안 읽힌다 */
.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::backdrop{background:var(--backdrop)}
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::backdrop{background:var(--backdrop)}
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}