/* ═══════════════════════════════════════════════════════════════
   NEMO AI (구 CSG 차세대 ETL 플랫폼) — 디자인 시스템 (design.css)
   토큰 → 기본 요소 → 부품. 모든 화면(/, /canvas, /browser, /design)이 이 파일 하나를 읽는다.
   원칙: 색은 토큰으로만 · 주조색은 레드(acc) 하나 — 주 행동·선택·핀·링크에만 쓰고 오류엔 쓰지 않는다(오류는 주황 err) · 명암 세 상태 · 숫자는 tabular · 아이콘 버튼은 툴팁 필수
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. 토큰 ─────────────────────────────────────────────── */
:root{
  /* 바탕·면 (어두운 기본) */
  --bg:#0D1014; --surf:#141920; --surf2:#1A2029; --surf3:#202833; --line:#242D39; --line2:#303B4A; --th:#1A2029;
  /* 글자 */
  --tx:#E8ECF1; --tx2:#9DA8B6; --tx3:#687485;
  /* 강조 */
  --acc:#D4646B; --acc2:#E27E85; --accd:#7A3B41; --accbg:#2A1B1D; --accfg:#FFFFFF;   /* 다크는 탁한 로즈 — 튀지 않게 */
  /* 의미색 — 흐름 종류 */
  --src:#B5AAA0; --srcbg:#262220;   /* 복사·원천 (중간 모래색 — 보이되 튀지 않게, 파랑 금지) */
  --cal:#D3949E; --calbg:#2A1B1F;   /* 계산 (와인 로즈 — 파랑·보라 금지, 주조 레드·분기 마젠타와 구분) */
  --key:#E8B33D; --keybg:#2A2210;   /* 조인키·축 */
  --br:#DC98B6;  --brbg:#2A1A22;    /* 분기 (분홍 — 레드와 같은 계열) */
  /* 의미색 — 상태 */
  --ok:#8FBF9F; --okbg:#17241C; --warn:#E0B25C; --warnbg:#2A2410; --err:#FF9A62; --errbg:#2D1A0F; --info:#B8B2AC; --infobg:#232120;   /* 오류는 주황 — 주조색(레드)과 구분. 정보는 중립 */
  /* 글꼴 */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:"Pretendard","Apple SD Gothic Neo","Noto Sans KR",-apple-system,system-ui,sans-serif;
  --fs-xs:10px; --fs-sm:11.5px; --fs-md:13px; --fs-lg:15px; --fs-xl:19px; --fs-2xl:26px;
  /* 간격·모서리·그림자 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-1:4px; --r-2:7px; --r-3:10px;
  --sh-1:0 1px 2px rgba(0,0,0,.25); --sh-2:0 6px 20px rgba(0,0,0,.35); --sh-3:0 20px 60px rgba(0,0,0,.5);
  /* 치수 */
  --h-top:48px; --h-bar:44px; --w-rail:220px; --w-insp:360px;
  --t-fast:.12s; --t-med:.25s;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#EDF0F3; --surf:#FFFFFF; --surf2:#F6F8FA; --surf3:#E9EDF1; --line:#D8DEE5; --line2:#BCC6D1; --th:#F8F9FA;
    --tx:#111820; --tx2:#4A5665; --tx3:#7B8798;
    --acc:#D7262D; --acc2:#B01E24; --accd:#F3B9BB; --accbg:#FBE9EA; --accfg:#FFFFFF;
    --src:#6B4E35; --srcbg:#F3ECE4; --cal:#8C3B4A; --calbg:#F7EAEC; --key:#8A6410; --keybg:#FAF2DD; --br:#B03070; --brbg:#FBE8F0;
    --ok:#3E7F5C; --okbg:#E9F4EA; --warn:#9A6B12; --warnbg:#FBF2DD; --err:#C2410C; --errbg:#FDECE3; --info:#6B6460; --infobg:#F1EEEB;
    --sh-1:0 1px 2px rgba(0,0,0,.08); --sh-2:0 6px 20px rgba(0,0,0,.12); --sh-3:0 20px 60px rgba(0,0,0,.2);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#EDF0F3; --surf:#FFFFFF; --surf2:#F6F8FA; --surf3:#E9EDF1; --line:#D8DEE5; --line2:#BCC6D1; --th:#F8F9FA;
  --tx:#111820; --tx2:#4A5665; --tx3:#7B8798;
  --acc:#D7262D; --acc2:#B01E24; --accd:#F3B9BB; --accbg:#FBE9EA; --accfg:#FFFFFF;
  --src:#6B4E35; --srcbg:#F3ECE4; --cal:#8C3B4A; --calbg:#F7EAEC; --key:#8A6410; --keybg:#FAF2DD; --br:#B03070; --brbg:#FBE8F0;
  --ok:#3E7F5C; --okbg:#E9F4EA; --warn:#9A6B12; --warnbg:#FBF2DD; --err:#C2410C; --errbg:#FDECE3; --info:#6B6460; --infobg:#F1EEEB;
  --sh-1:0 1px 2px rgba(0,0,0,.08); --sh-2:0 6px 20px rgba(0,0,0,.12); --sh-3:0 20px 60px rgba(0,0,0,.2);
  color-scheme:light;
}
/* 연결선 토큰 — 캔버스(canvas_body.html)의 --e-* 와 같은 이름·같은 값. 계보 그래프 등 캔버스 밖 연결선도 이것을 쓴다.
   --e-hi 호버·선택으로 이어진 선(1.8px, 불투명 1) · --e-dim 그때의 나머지 선(1px, .35) · --e-copy/calc/join/br 평소 종류 색(1.4px, .8) */
:root{--e-hi:#B35F66;--e-dim:#6F6662;--e-copy:#9E7276;--e-calc:#8E6470;--e-join:#84585C;--e-br:#B08A8E}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--e-hi:#E0565C;--e-dim:#C4BAB5;--e-copy:#CF8A8E;--e-calc:#C07884;--e-join:#B8656A;--e-br:#DDA0A4}}
:root[data-theme="light"]{--e-hi:#E0565C;--e-dim:#C4BAB5;--e-copy:#CF8A8E;--e-calc:#C07884;--e-join:#B8656A;--e-br:#DDA0A4}

/* ── 2. 기본 요소 ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--tx3);background-clip:padding-box}*::-webkit-scrollbar-corner{background:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--tx);font:var(--fs-md)/1.5 var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.m,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;text-align:right}
h1,h2,h3,h4{margin:0;line-height:1.3;letter-spacing:-.01em}h1{font-size:var(--fs-2xl)}h2{font-size:var(--fs-xl)}h3{font-size:var(--fs-lg)}h4{font-size:var(--fs-md)}
.eyebrow{font:var(--fs-xs) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.muted{color:var(--tx2)}.faint{color:var(--tx3)}.hint{font-size:var(--fs-xs);color:var(--tx3);line-height:1.5}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 3. 부품 ─────────────────────────────────────────────── */
/* 버튼 */
.btn{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line2);border-radius:var(--r-2);padding:5px 11px;font-size:12px;color:var(--tx2);white-space:nowrap;background:var(--surf2);transition:border-color var(--t-fast),color var(--t-fast),background var(--t-fast)}
.btn:hover{color:var(--tx);border-color:var(--accd)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.pri{border-color:var(--acc);color:var(--acc);background:transparent}.btn.pri:hover{background:var(--acc);color:var(--accfg)}.btn.pri:hover svg{stroke:var(--accfg)}
.btn.danger{border-color:var(--err);color:var(--err)}.btn.danger:hover{background:var(--errbg)}
.btn.ghost{border-color:transparent;background:transparent}.btn.ghost:hover{background:var(--surf2)}
.btn.sm{padding:3px 8px;font-size:11px}
.btn.ico{padding:0;width:30px;height:28px;justify-content:center}.btn.ico.sm{width:26px;height:22px}
.btn svg,.ico svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn.on{border-color:var(--acc);color:var(--acc)}
/* 입력 */
.inp,.input,.select,textarea.inp{width:100%;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-2);color:var(--tx);font:var(--fs-sm) var(--mono);padding:6px 9px;outline:0;transition:border-color var(--t-fast)}
.inp:focus,.input:focus,.select:focus{border-color:var(--accd)}.inp:disabled,.input:disabled,.select:disabled{opacity:.55;cursor:not-allowed;background:var(--surf2)}
textarea.inp,textarea{min-height:calc(1.5em * 4 + 14px);line-height:1.5;resize:vertical}.inp::placeholder{color:var(--tx3)}
select.inp,.select{appearance:none;cursor:pointer;padding-right:24px;background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),linear-gradient(135deg,var(--tx3) 50%,transparent 50%);background-position:calc(100% - 13px) 50%,calc(100% - 8px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld{display:flex;flex-direction:column;gap:3px;margin-bottom:var(--sp-2)}.fld label{font-size:var(--fs-xs);color:var(--tx3);letter-spacing:.02em}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
/* 오토컴플리트 (ds.js 가 select.ac 를 바꾼다) */
.ds-ac{position:relative;display:inline-flex;align-items:center;min-width:150px}.ds-ac input{width:100%;min-width:0;background:transparent;border:0;color:var(--tx);font:var(--fs-sm) var(--mono);padding:5px 22px 5px 9px;outline:0}
.ds-ac::after{content:'';position:absolute;right:9px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--tx3);border-bottom:1.5px solid var(--tx3);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.fld>.ds-ac,.inp.ac+.ds-ac{border:1px solid var(--line2);border-radius:var(--r-2);background:var(--bg);width:100%}
.ds-ac-list{position:fixed;z-index:500;display:none;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-2);box-shadow:var(--sh-2);overflow:auto}.ds-ac-list.open{display:block}
.ds-ac-list .it{padding:6px 10px;cursor:pointer;font:var(--fs-sm) var(--mono);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ds-ac-list .it:last-child{border-bottom:0}.ds-ac-list .it:hover,.ds-ac-list .it.cur{box-shadow:inset 2px 0 0 var(--acc);background:var(--surf2)}.ds-ac-list .it.sel{color:var(--acc)}.ds-ac-list .it.none{color:var(--tx3);cursor:default}.ds-ac-list .it.dim{opacity:.45}
/* 트리 행(DS.autocomplete 의 optgroup · data-group): 들여쓰기 안내선 .gd · 펼침 화살표 .tw · 그룹 이름 .gn · 개수 .ct */
.ds-ac-list .it.tr{display:flex;align-items:stretch;padding:0 10px 0 4px;border-bottom:0}.ds-ac-list .it.tr .tx{flex:1;min-width:0;padding:5px 4px;overflow:hidden;text-overflow:ellipsis}.ds-ac-list .gd{flex:none;width:14px;background:linear-gradient(var(--line2),var(--line2)) 6px 0/1px 100% no-repeat}.ds-ac-list .tw{flex:none;width:14px;display:flex;align-items:center;justify-content:center;color:var(--tx3);font-size:10px}.ds-ac-list .it.g{font-family:var(--sans);font-weight:600;color:var(--tx2)}.ds-ac-list .gn{align-self:center;flex:1;min-width:0;padding:5px 4px;overflow:hidden;text-overflow:ellipsis}.ds-ac-list .ct{align-self:center;flex:none;font:10px var(--mono);color:var(--tx3);border:1px solid var(--line);border-radius:9px;padding:0 6px;font-weight:400}.ds-ac-list mark{background:transparent;color:var(--acc);font-weight:700}
/* 세그(라벨 + 컨트롤) */
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-2);overflow:hidden;background:var(--surf2);align-items:stretch}
.seg .lb{font:var(--fs-xs) var(--mono);letter-spacing:.07em;color:var(--tx3);background:var(--surf3);display:flex;align-items:center;padding:0 8px;white-space:nowrap;flex:none}
.seg select,.seg input{background:transparent;border:0;color:var(--tx);font:var(--fs-sm) var(--mono);padding:5px 9px;outline:0}
/* 스위치 */
.sw{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12px;color:var(--tx2);user-select:none;white-space:nowrap}
.sw i{width:30px;height:16px;border-radius:9px;background:var(--line2);position:relative;transition:background var(--t-fast);flex:none}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:var(--surf);transition:left var(--t-fast)}
.sw.on i{background:var(--acc)}.sw.on i::after{left:16px}.sw.on{color:var(--tx)}
/* 칩·배지·태그 */
.chip{display:inline-flex;align-items:center;gap:5px;font:var(--fs-xs) var(--mono);padding:2px 7px;border-radius:10px;border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
.chip.on{background:transparent;color:var(--acc);border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}.chip.click{cursor:pointer}.chip.click:hover{border-color:var(--acc);color:var(--acc)}
.badge{display:inline-flex;align-items:center;gap:4px;font:var(--fs-xs) var(--mono);padding:2px 7px;border-radius:var(--r-1);border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
.badge.ok{color:var(--ok);border-color:var(--ok);background:transparent}.badge.warn{color:var(--warn);border-color:var(--warn);background:var(--warnbg)}
.badge.err{color:var(--err);border-color:var(--err);background:var(--errbg)}.badge.info{color:var(--info);border-color:var(--info);background:var(--infobg)}.badge.acc{color:var(--acc);border-color:var(--acc);background:transparent}
.tag{font:var(--fs-xs) var(--mono);padding:2px 6px;border-radius:var(--r-1);letter-spacing:.03em}
.tg-src{background:var(--srcbg);color:var(--src)}.tg-mst{background:var(--keybg);color:var(--key)}.tg-prep{background:var(--calbg);color:var(--cal)}.tg-eng{background:var(--accbg);color:var(--acc)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line2);vertical-align:middle}.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.err{background:var(--err)}.dot.acc{background:var(--acc)}
/* 카드·KPI·빈 상태 */
.card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-3);padding:var(--sp-3) var(--sp-4)}
.card .ch{display:flex;align-items:baseline;gap:8px;margin-bottom:var(--sp-2)}.card .ch h3{font-size:var(--fs-md)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-2)}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:var(--r-3);padding:10px 12px}.kpi .v{font:600 var(--fs-xl)/1.1 var(--mono);font-variant-numeric:tabular-nums}.kpi .l{font-size:var(--fs-xs);color:var(--tx3);margin-top:3px}
.kpi.ok .v{color:var(--ok)}.li.on,.it.cur,.tb.on{background:transparent!important;box-shadow:inset 2px 0 0 var(--acc)}.kpi.warn .v{color:var(--warn)}.kpi.err .v{color:var(--err)}.kpi.acc .v{color:var(--acc)}
.empty{padding:var(--sp-6) var(--sp-4);color:var(--tx3);text-align:center;font-size:var(--fs-sm)}.empty b{display:block;color:var(--tx2);font-size:var(--fs-md);margin-bottom:4px}
/* 표 */
.table{border-collapse:separate;border-spacing:0;width:100%;font:var(--fs-sm)/1.4 var(--sans)}
.table th{position:sticky;top:0;z-index:1;background:var(--th);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line2);font-weight:600;color:var(--tx2);white-space:nowrap}
.table td{padding:5px 10px;border-bottom:1px solid var(--line);vertical-align:top}.table tr:hover td{background:var(--surf2)}.table td.m{font-size:var(--fs-sm)}
.table.dense td,.table.dense th{padding:3px 8px}
/* 탭·레일 */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line)}.tabs button{padding:8px 12px;color:var(--tx2);border-bottom:2px solid transparent;font-size:var(--fs-md);display:inline-flex;align-items:center;gap:6px}
.tabs button:hover{color:var(--tx)}.tabs button.on{color:var(--tx);border-bottom-color:var(--acc)}
/* 상단 앱 헤더 */
.apptop{height:var(--h-top);display:flex;align-items:center;gap:var(--sp-3);padding:0 var(--sp-4);background:var(--surf);border-bottom:1px solid var(--line);position:relative;z-index:50}
.apptop .brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;white-space:nowrap;letter-spacing:-.01em}.apptop .brand .badge{font-size:var(--fs-xs,11px)}.apptop .brand i{width:10px;height:10px;background:var(--acc);border-radius:2px;display:block;box-shadow:0 0 0 2px var(--accbg)}
.apptop nav{display:flex;gap:2px;margin-left:var(--sp-3);flex:none}.apptop .chip,.apptop .badge,.apptop .pin{white-space:nowrap;flex:none}.apptop nav a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-2);color:var(--tx2);font-size:12.5px;white-space:nowrap}
.apptop nav a:hover{color:var(--tx);background:var(--surf2);text-decoration:none}.apptop nav a{position:relative;transition:background var(--t-fast,.12s),color var(--t-fast,.12s)}.apptop nav a.on{color:var(--acc);background:var(--accbg);box-shadow:none;font-weight:600;border-radius:8px}.apptop nav a.on:hover{background:var(--accbg)}.apptop nav a.on::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--acc) 22%,var(--acc) 78%,transparent);opacity:.9;box-shadow:0 0 6px color-mix(in srgb,var(--acc) 35%,transparent)}.apptop nav a.on svg{stroke-width:2.1}.apptop nav a svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.apptop .sp{flex:1}
/* 본문 헤더(화면 자체의 바) — 모든 화면이 같은 틀: 높이 44 · 좌측 로고(빨간 네모 + 영문 제목) · 컨트롤 · 우측 정렬 */
.bar{height:var(--h-bar);min-height:var(--h-bar);display:flex;align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);background:var(--surf);border-bottom:1px solid var(--line);flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;flex:none}
.bar .logo{display:flex;align-items:center;gap:8px;font-weight:700;white-space:nowrap;font-size:13px;letter-spacing:-.01em;margin-right:var(--sp-2)}.bar .logo i{width:9px;height:9px;background:transparent;border:2px solid var(--acc);border-radius:2px;display:block;box-sizing:border-box}.bar .logo small{font-weight:400;color:var(--tx3);font-size:11px;margin-left:2px}
.bar .sp{flex:1 1 auto}
.subtabs{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-2);overflow:hidden;background:var(--surf2)}.subtabs button{padding:4px 10px;font-size:11.5px;color:var(--tx2);border-right:1px solid var(--line2);white-space:nowrap}.subtabs button:last-child{border-right:0}.subtabs button:hover{color:var(--tx)}.subtabs button.on{color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:transparent}
/* 묶음 모서리 — overflow:hidden + radius 묶음(.subtabs·.seg·.seg2) 안의 양 끝 자식은 안쪽 반지름(r-2 − 테두리 1px)을 갖는다.
   선택 자식의 inset 테두리가 부모 모서리에 깎여 끊겨 보이지 않게 한다. 중간 자식은 직각이라 깎일 곳이 없다. */
:where(.subtabs,.seg,.seg2)>:first-child{border-top-left-radius:calc(var(--r-2) - 1px);border-bottom-left-radius:calc(var(--r-2) - 1px)}
:where(.subtabs,.seg,.seg2)>:last-child{border-top-right-radius:calc(var(--r-2) - 1px);border-bottom-right-radius:calc(var(--r-2) - 1px)}
/* 화면 본문 — 여백 sp-3(12) 한 겹, 묶음 간격 sp-3. 아래 여백에는 에이전트 버튼 자리(--fab-safe, §B)를 더한다 */
.screen-body{padding:var(--sp-3) var(--sp-3) calc(var(--sp-3) + var(--fab-safe,0px));display:flex;flex-direction:column;gap:var(--sp-3);min-height:0}
.screen-body .two{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:var(--sp-3);min-height:0}
/* 툴팁·토스트·대화상자·드로워 */
#tip,.tip{position:fixed;z-index:120;pointer-events:none;background:var(--tx);color:var(--bg);font:var(--fs-sm)/1.3 var(--sans);padding:5px 8px;border-radius:var(--r-2);box-shadow:var(--sh-2);opacity:0;transition:opacity .08s;white-space:nowrap;max-width:380px}
#tip.on,.tip.on{opacity:1}#tip small,.tip small{display:block;opacity:.75;white-space:normal}
.toast{position:fixed;left:50%;bottom:48px;transform:translateX(-50%);background:var(--tx);color:var(--bg);padding:6px 12px;border-radius:var(--r-2);font-size:12px;opacity:0;transition:opacity var(--t-fast);pointer-events:none;z-index:125}.toast.on{opacity:1}
.dlg{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.5)}.dlg.open,.dlg.on{display:flex}
.dlg .box{width:min(540px,92vw);background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-3);padding:16px 18px;box-shadow:var(--sh-3)}
.dlg h4{margin:0 0 8px;font-size:14px}.dlg .msg{font:var(--fs-sm)/1.5 var(--mono);color:var(--tx2);white-space:pre-wrap;max-height:40vh;overflow:auto;margin-bottom:10px}.dlg .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.drawer-full{position:fixed;left:0;right:0;bottom:0;height:100vh;background:var(--bg);z-index:80;transform:translateY(100%);transition:transform var(--t-med) ease;box-shadow:var(--sh-3)}.drawer-full.open{transform:none}.drawer-full iframe{width:100%;height:100%;border:0;display:block}
/* 코드 */
pre.code,.code{margin:0;background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-2);padding:10px 11px;font:var(--fs-sm)/1.45 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;overflow:auto}
.dl{color:var(--err);background:var(--errbg)}.di{color:var(--ok);background:var(--okbg)}
/* 세 칸 보고 */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3)}.r{padding:7px 9px;border:1px solid var(--line2);border-radius:var(--r-2);font-size:var(--fs-sm);margin-bottom:6px;background:var(--surf2)}
.r.sure{background:var(--errbg);border-color:var(--err)}.r.sure b{color:var(--err)}.r.maybe{background:var(--warnbg);border-color:var(--warn)}.r.maybe b{color:var(--warn)}.r.blind{color:var(--tx3)}
/* 레이아웃 보조 */
.stack{display:flex;flex-direction:column;gap:var(--sp-3)}.hstack{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}.grow{flex:1;min-width:0}
.page{padding:var(--sp-4);max-width:1480px;margin:0 auto}.page.wide{max-width:none}
.split{display:grid;grid-template-columns:var(--w-rail) 1fr;gap:var(--sp-3);min-height:0}

/* ── 4. 알림·진행·보조 부품 (design.html 에 살아 있는 예시) ───────────── */
/* 세그 안의 버튼 — 서브탭과 같은 선택 표현(.on = acc 외곽선). 양 끝 반지름은 §3 '묶음 모서리' 규칙이 준다 */
.seg>button:not(.btn){padding:4px 10px;font-size:11.5px;color:var(--tx2);border-right:1px solid var(--line2);white-space:nowrap}.seg>button:not(.btn):last-child{border-right:0}.seg>button:not(.btn):hover{color:var(--tx)}.seg>button:not(.btn).on{color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:transparent}
/* 배너 — 화면·카드 머리에 붙는 띠. 상태색만(acc 금지). 제목 b 한 줄 + 본문, 닫기는 .x */
.banner{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;border:1px solid var(--line2);border-left-width:3px;border-radius:var(--r-2);background:var(--surf2);color:var(--tx);font-size:var(--fs-sm);line-height:1.5}
.banner b{font-weight:600;margin-right:4px}.banner .grow{flex:1;min-width:0}.banner .x{margin-left:auto;color:var(--tx3);padding:0 4px;line-height:1.2;font-size:14px}.banner .x:hover{color:var(--tx)}
.banner.info{border-color:var(--info);background:var(--infobg)}.banner.info b{color:var(--info)}
.banner.ok{border-color:var(--ok);background:var(--okbg)}.banner.ok b{color:var(--ok)}
.banner.warn{border-color:var(--warn);background:var(--warnbg)}.banner.warn b{color:var(--warn)}
.banner.err{border-color:var(--err);background:var(--errbg)}.banner.err b{color:var(--err)}
.banner.mono,.banner pre{font-family:var(--mono);white-space:pre-wrap}
/* 토스트 상태 — 기본은 반전 면. 상태는 왼쪽 띠 하나로만 */
.toast.ok{box-shadow:inset 3px 0 0 var(--ok)}.toast.warn{box-shadow:inset 3px 0 0 var(--warn)}.toast.err{box-shadow:inset 3px 0 0 var(--err)}
/* 스피너·로딩 줄 — 1초 안에 끝나지 않는 요청에만. 글자로 무엇을 기다리는지 함께 쓴다 */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line2);border-top-color:var(--acc);border-radius:50%;animation:ds-spin .8s linear infinite;vertical-align:middle;flex:none}.spinner.sm{width:10px;height:10px;border-width:1.5px}.spinner.lg{width:22px;height:22px;border-width:2.5px}
@keyframes ds-spin{to{transform:rotate(360deg)}}
.loading{display:flex;align-items:center;gap:8px;color:var(--tx3);font-size:var(--fs-sm);padding:var(--sp-2) 0}
/* 진행 막대 — 값이 있으면 너비, 모르면 .ind(왕복). 상태색은 .ok/.warn/.err */
.prog{position:relative;height:6px;border-radius:3px;background:var(--surf3);overflow:hidden}.prog>i{display:block;height:100%;width:0;background:var(--acc);border-radius:inherit;transition:width var(--t-med)}
.prog.ok>i{background:var(--ok)}.prog.warn>i{background:var(--warn)}.prog.err>i{background:var(--err)}
.prog.ind>i{width:35%;position:absolute;animation:ds-ind 1.2s ease-in-out infinite}@keyframes ds-ind{0%{left:-35%}100%{left:100%}}
/* 키 표시 */
.kbd{display:inline-block;font:10px/1.5 var(--mono);border:1px solid var(--line2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--tx2);background:var(--surf2)}
/* 큰 빈 상태 — 패널 하나를 통째로 채울 때(.empty 는 카드 안 한 줄) */
.empty-st{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--tx3);text-align:center;padding:24px;font-size:12px;line-height:1.6}.empty-st b{color:var(--tx2);font-size:13px}

/* ───── §B 레이아웃 부품 · 머리줄 반응형 (2026-10-20, 설계/명세/화면_구조_감사_20261020.md 묶음 B1·B2) ─────
   B1 레이아웃 부품 (design.html #layb 에 살아 있는 예시)
     .seg .lb        라벨은 줄바꿈하지 않고 줄어들지 않는다(§3 의 규칙에 white-space:nowrap · flex:none)
     .screen-body    여백 12 한 겹 + 아래에 에이전트 버튼 자리 --fab-safe (오른쪽 아래 .ag-fab 이 마지막 행·범례를 덮지 않게)
     .two            목록+상세 = minmax(240px,320px) | 1fr. 1023px 이하는 한 칸(목록 위, 상세 아래).
                     .two.pane(DS.twoPane 이 붙인다) 이면 1023px 이하에서 목록 ↔ 상세를 번갈아 보이고 상세 위에 "← 목록"
     .popover        "보기" 옵션 등 버튼에 붙는 작은 판. DS.popover(버튼, 판) — Esc·바깥 클릭 닫기, 포커스는 버튼으로 돌아간다. .mi = 메뉴 항목
     .bar .tail      도구줄 오른쪽 끝 고정 슬롯 [상태 문구][주 동작][⋯][새로고침] — 도구줄이 가로로 넘쳐도 오른쪽에 붙어 있다
     .empty-st .acts 빈 상태의 동작 버튼 줄(빈 상태는 언제나 다음 동작을 가진다)
   B2 머리줄 .apptop — 첫 단계만: ETL · Lineage · DBMS · Definitions · Runs · Review … ⌘K · 회차 핀 · Settings(맨 오른쪽). 툴팁 없음.
     둘째 단계는 main > .gnav(= 관리 콘솔 .snav 와 같은 부품) — 아래 '둘째 단계 사이드바'.
     넘치면 메뉴 띠 #nav 만 가로로 민다: 스크롤 막대 숨김 · 넘친 쪽 끝 흐림(.ovl/.ovr, 셸 JS) · 세로 휠 → 가로 · 선택/포커스 메뉴는 보이는 곳으로.
     ≥1280 아이콘+글자, 검색칸 · 1024–1279 좁은 간격, 검색은 ⌘K 아이콘 버튼 · <1024 아이콘만(aria-label) · <768 브랜드 글자 숨김.
     명암·상태 버튼은 Settings 화면 도구줄로 옮겼다. 어느 폭에서도 머리줄 scrollWidth ≤ clientWidth. */
:root{--fab-safe:96px;--scrim:rgba(0,0,0,.52)}   /* 화면 끝 행이 .ag-fab(오른쪽 아래 16 + 높이 40)에 가리지 않게 남기는 바닥 여유 — 2026-10-21 부터 화면 본문은 §L2 가 0 으로 덮고, 넘쳐 스크롤하는 영역 끝 안쪽에만 --fab-end 를 둔다 */
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--scrim:rgba(17,24,32,.34)}}
:root[data-theme="light"]{--scrim:rgba(17,24,32,.34)}
/* 목록+상세 */
.two{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:var(--sp-3);min-height:0}
.two>*{min-width:0}
.two>.two-back{display:none}
@media (max-width:1023px){
  .two,.screen-body .two{grid-template-columns:minmax(0,1fr)}
  .two.pane:not(.detail)>.two-detail{display:none}
  .two.pane.detail>.two-list{display:none}
  .two.pane.detail>.two-back{display:inline-flex;justify-self:start}
}
/* 보기 팝오버 */
.popover{position:fixed;z-index:110;left:0;top:0;min-width:200px;max-width:min(360px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-3);box-shadow:var(--sh-2);padding:var(--sp-2);display:none;font-size:var(--fs-sm)}
.popover.open{display:block}
.popover .pop-h{font:var(--fs-xs) var(--mono);letter-spacing:.07em;color:var(--tx3);padding:4px 8px 2px}
.popover .pop-row{display:flex;align-items:center;gap:8px;padding:5px 8px;color:var(--tx2)}.popover .pop-row>.grow{flex:1;min-width:0}
.popover hr{border:0;border-top:1px solid var(--line);margin:6px 0}
.popover .mi{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border-radius:var(--r-2);color:var(--tx2);font-size:12.5px;text-align:left;white-space:nowrap}
.popover .mi:hover,.popover .mi:focus-visible{background:var(--surf2);color:var(--tx);outline:0}
.popover .mi.on{color:var(--acc);box-shadow:inset 2px 0 0 var(--acc);font-weight:600}
.popover .mi svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.popover .mi .end{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--tx3);font:var(--fs-xs) var(--mono)}
.popover .mi .cnt{background:var(--acc);color:var(--accfg);font:9.5px var(--mono);padding:0 5px;border-radius:8px}
:root .popover{opacity:0;transform:translateY(-4px);transition:opacity var(--dur-fast,120ms) var(--ease-in,ease-in),transform var(--dur-fast,120ms) var(--ease-in,ease-in),display var(--dur-fast,120ms) allow-discrete}
:root .popover.open{opacity:1;transform:none;transition:opacity var(--dur-med,200ms) var(--ease-out,ease-out),transform var(--dur-med,200ms) var(--ease-out,ease-out),display var(--dur-med,200ms) allow-discrete}
@starting-style{:root .popover.open{opacity:0;transform:translateY(-4px)}}
/* 도구줄 오른쪽 끝 고정 슬롯 */
.bar .tail{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2);flex:none;position:sticky;right:0;background:inherit;padding-left:var(--sp-2)}
.bar .tail .hint,.bar .tail .stat{white-space:nowrap}
/* 빈 상태 동작 버튼 */
.empty-st .acts,.empty .acts{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-top:4px}
.empty-st svg.big{width:28px;height:28px;stroke:var(--tx3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* 머리줄 */
.apptop{gap:var(--sp-2);min-width:0}
.apptop>*{flex:none}.apptop>.sp{flex:1 1 0;min-width:0}
/* 메뉴 띠: 남은 폭을 쓰고, 넘치면 가로 스크롤(막대 숨김). 높이를 머리줄만큼 늘려 선택 표시줄(bottom -9px)과 숫자 배지(top -4px)가 잘리지 않게 */
.apptop>nav{flex:0 1 auto;min-width:0;align-self:stretch;align-items:center;margin-left:var(--sp-1);gap:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-padding-inline:28px;padding:0 4px}   /* 좌우 4px: 묶음 버튼 숫자 배지(right -2px)가 띠를 넘치게 하지 않게 */
.apptop>nav::-webkit-scrollbar{display:none}
.apptop>nav a{flex:none;padding:6px 7px}.apptop>nav a.on::after{bottom:-8px}   /* 띠(높이 47) 안에 2px 표시줄이 다 들어오게 */
/* 머리줄은 첫 단계만: ETL · Lineage · DBMS · 묶음(Definitions · Runs · Review, .ng-a) … 오른쪽 Settings(.hd-admin).
   묶음을 누르면 그 묶음에서 마지막에 본 화면으로 간다. 둘째 단계는 왼쪽 사이드바 .gnav(아래). 머리줄 메뉴에는 툴팁을 달지 않는다 */
.apptop .hd-admin{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--r-2);color:var(--tx2);font-size:12.5px;white-space:nowrap;position:relative;flex:none;transition:background var(--t-fast,.12s),color var(--t-fast,.12s)}
.apptop .hd-admin:hover{color:var(--tx);background:var(--surf2);text-decoration:none}
.apptop .hd-admin.on{color:var(--acc);background:var(--accbg);font-weight:600;border-radius:8px}
.apptop .hd-admin.on::after{content:'';position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--acc) 22%,var(--acc) 78%,transparent);opacity:.9;box-shadow:0 0 6px color-mix(in srgb,var(--acc) 35%,transparent)}
.apptop .hd-admin svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.apptop #me{display:none}   /* 역할은 Settings 안에서 본다(요소는 셸 코드가 쓰므로 남긴다) */
/* 둘째 단계 사이드바 .gnav — 관리 콘솔 .snav(§A)와 같은 부품. 지금 화면이 묶음에 속하면 main 왼쪽에 그 묶음의 화면들을 보이고(.gn-g.on),
   화면(.screen)은 사이드바 폭만큼 오른쪽으로 민다(main.has-gnav). 1024px 이하에서는 .snav 처럼 위쪽 가로 탭이 되고 화면은 그 높이만큼 내려간다.
   셸이 그린다(화면 섹션은 고치지 않는다). 키보드: Tab 으로 들어와 ↑↓(좁을 때 ←→)로 옮기고 Enter */
:root{--gnav-w:200px;--gnav-h:38px}
main>.gnav{position:absolute;left:0;top:0;bottom:0;width:var(--gnav-w);z-index:5}
main>.gnav[hidden]{display:none}
main>.gnav .gn-g{display:none;flex-direction:column;gap:1px}main>.gnav .gn-g.on{display:flex}
main>.gnav button .lbl{flex:1;min-width:0}
main>.gnav button .ct.cnt-r{background:var(--acc);color:var(--accfg);padding:0 6px;border-radius:8px;font:9.5px/1.6 var(--mono)}
main.has-gnav>.screen{left:var(--gnav-w)}
@media (max-width:1024px){
  main>.gnav{right:0;bottom:auto;width:auto;height:var(--gnav-h);display:flex}
  main>.gnav .gn-g.on{flex-direction:row;align-items:stretch;gap:0}
  main.has-gnav>.screen{left:0;top:var(--gnav-h)}
}
.apptop>nav.ovr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent)}
.apptop>nav.ovl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px);mask-image:linear-gradient(90deg,transparent,#000 36px)}
.apptop>nav.ovl.ovr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.apptop .hd-k,.apptop .gq-scrim{display:none}
.apptop .hd-k svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.apptop .gs{flex:0 20 220px;min-width:136px}   /* 모자라면 검색칸이 먼저 줄고(136 까지) 그다음 메뉴 띠가 스크롤 */
.apptop .gs .gs-k{position:absolute;right:7px;top:50%;transform:translateY(-50%);pointer-events:none}
.apptop .gs input{padding-right:40px}
.apptop .hd-k{gap:6px}
.apptop .gq-scrim{position:fixed;inset:0;z-index:64;background:var(--scrim)}
.apptop .gs.pal{display:block;position:fixed;z-index:66;top:60px;width:min(560px,calc(100vw - 32px));left:calc((100vw - min(560px,calc(100vw - 32px))) / 2);min-width:0}
.apptop .gs.pal input{font-size:var(--fs-md);padding:9px 44px 9px 12px;box-shadow:var(--sh-2);background:var(--surf)}
.apptop .gs.pal~.gq-scrim,.apptop.pal-on .gq-scrim{display:block}
.apptop .gs .dd .gh{padding:6px 10px 3px;font:var(--fs-xs) var(--mono);letter-spacing:.07em;color:var(--tx3);border-bottom:1px solid var(--line);background:var(--surf2);position:sticky;top:0}
.apptop .gs .dd .it .badge{flex:none}
.apptop .gs .dd .it b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.apptop .gs .dd .it small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 0}
.apptop .gs .dd .foot{padding:5px 10px;font-size:var(--fs-xs);color:var(--tx3);display:flex;gap:10px;flex-wrap:wrap;background:var(--surf2);position:sticky;bottom:0;border-top:1px solid var(--line)}
@media (max-width:1279px){
  .apptop{gap:6px;padding:0 var(--sp-3)}
  .apptop>nav{margin-left:var(--sp-1);gap:0}
  .apptop>nav>a,.apptop .hd-admin{padding:6px 5px;gap:4px}
  .apptop .gs{display:none}
  .apptop .hd-k{display:inline-flex}
}
@media (max-width:1023px){
  .apptop>nav>a .lbl,.apptop .hd-admin .lbl{display:none}
  .apptop>nav>a,.apptop .hd-admin{padding:6px 6px}
  .apptop .pin .pk{display:none}
  .apptop .pin b{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:767px){
  .apptop{padding:0 var(--sp-2);gap:4px}
  .apptop>nav{margin-left:0}
  .apptop .brand .bt,.apptop .brand .badge,.apptop #me{display:none}
  .apptop .hd-k{padding:0;width:30px;height:28px;justify-content:center}.apptop .hd-k .kbd{display:none}
  .apptop .pin{padding:3px 6px}.apptop .pin b{max-width:72px}
}

/* ───── §5 모션 (2026-10-20) — 배너·토스트·대화상자·툴팁의 등장/퇴장 ─────
   규칙: 등장은 ease-out 으로 조금 길게(160~280ms), 퇴장은 ease-in 으로 짧게(80~140ms). display 를 바꾸는 요소는
   @starting-style + transition-behavior:allow-discrete 로 들어올 때와 나갈 때 모두 움직인다(화면 코드 수정 불필요).
   각 화면이 자체 .dlg/#tip 규칙을 가져서 여기서는 :root 를 붙여 우선순위를 한 단계 올린다. 동작 줄이기 설정은 짧은 페이드만. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--ease-in:cubic-bezier(.4,0,1,1);--dur-fast:120ms;--dur-med:200ms;--dur-slow:280ms;--tip-delay:300ms}
/* 대화상자 */
:root .dlg{opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity var(--dur-fast) var(--ease-in),backdrop-filter var(--dur-fast) var(--ease-in),display var(--dur-fast) allow-discrete,overlay var(--dur-fast) allow-discrete}
:root .dlg.open,:root .dlg.on{opacity:1;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity var(--dur-med) var(--ease-out),backdrop-filter var(--dur-med) var(--ease-out),display var(--dur-med) allow-discrete,overlay var(--dur-med) allow-discrete}
@starting-style{:root .dlg.open,:root .dlg.on{opacity:0;backdrop-filter:blur(0)}}
:root .dlg .box{transform:translateY(8px) scale(.96);opacity:0;transition:transform var(--dur-fast) var(--ease-in),opacity var(--dur-fast) var(--ease-in)}
:root .dlg.open .box,:root .dlg.on .box{transform:none;opacity:1;transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-med) var(--ease-out)}
@starting-style{:root .dlg.open .box,:root .dlg.on .box{transform:translateY(8px) scale(.96);opacity:0}}
/* 토스트 — 아래에서 떠오르고, 남은 시간 막대, 올려 두면 멈춤(.hold), 눌러 닫기 */
/* 크기(2026-10-21): 최소 200×50 · 최대 min(480px, 100vw−32px) · 좌우 16 · 글자와 동작 버튼은 세로 가운데 · 1~2줄 줄간격 1.45 · 아래 2px 은 남은 시간 막대 자리 */
:root .toast{display:flex;align-items:center;gap:12px;box-sizing:border-box;width:max-content;min-width:200px;min-height:50px;max-width:min(480px,calc(100vw - 32px));padding:10px 16px 12px;font:500 12.5px/1.45 var(--sans);text-align:left;white-space:normal;overflow-wrap:anywhere;opacity:0;transform:translate(-50%,10px) scale(.98);transition:opacity var(--dur-fast) var(--ease-in),transform var(--dur-fast) var(--ease-in);pointer-events:none;overflow:hidden}
:root .toast.on{opacity:1;transform:translate(-50%,0) scale(1);transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-slow) var(--ease-out);pointer-events:auto;cursor:pointer}
:root .toast::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--acc);opacity:.8;transform-origin:left;transform:scaleX(0)}
:root .toast.on::after{animation:ds-toast-life var(--toast-ms,1800ms) linear forwards}
:root .toast.on.hold::after{animation-play-state:paused}
@keyframes ds-toast-life{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* 툴팁 — 처음엔 300ms 기다렸다 떠오르고, 다른 툴팁으로 옮겨 가면 기다리지 않고 미끄러져 이동, 사라질 때 80ms */
:root #tip,:root .tip{opacity:0;transform:translateY(4px);transition:opacity 80ms var(--ease-in),transform 80ms var(--ease-in),left 140ms var(--ease-out),top 140ms var(--ease-out)}
:root #tip.on,:root .tip.on{opacity:1;transform:none;transition:opacity 140ms var(--ease-out) var(--tip-delay),transform 160ms var(--ease-out) var(--tip-delay),left 140ms var(--ease-out),top 140ms var(--ease-out)}
:root #tip.on.warm,:root .tip.on.warm{--tip-delay:0ms}
/* 배너 — 닫으면 높이째 접히며 사라지고 아래 내용이 올라온다 (.closing → transitionend 뒤 숨김) */
:root .banner{interpolate-size:allow-keywords;overflow:hidden;transition:opacity var(--dur-med) var(--ease-out),height var(--dur-slow) var(--ease-out),padding var(--dur-slow) var(--ease-out),margin var(--dur-slow) var(--ease-out),border-width var(--dur-slow) var(--ease-out)}
:root .banner.closing{opacity:0;height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;border-top-width:0;border-bottom-width:0}
@starting-style{:root .banner{opacity:0}}
@media (prefers-reduced-motion:reduce){
  :root .dlg .box,:root .dlg.open .box,:root .dlg.on .box,:root .toast,:root .toast.on,:root #tip,:root #tip.on,:root .tip,:root .tip.on{transform:none!important}
  :root .toast.on{transform:translate(-50%,0)!important}:root .toast{transform:translate(-50%,0)!important}
  :root .dlg,:root .dlg .box,:root .toast,:root #tip,:root .tip,:root .banner{transition-duration:60ms!important;transition-delay:0ms!important}
  :root .toast.on::after{animation:none}
}

/* ───── §6 에이전트 독 2판 (2026-10-20) — 테넌트 RAG 에이전트(/api/ag). 계약: 설계/명세/에이전틱_시스템_구성_20261020.md §6 ─────
   .ag-fab 오른쪽 아래 떠 있는 버튼 · .ag-scrim 거의 투명한 막(바닥 쪽만 살짝 짙게) · .ag-side 왼쪽 세션 사이드바 · .ag-dock 대화 독 · .ag-sheet 근거 미리보기.
   독은 위쪽 한계(--ag-top: 캔버스 처리 흐름 아래, JS 가 잰다)에서 바닥까지, 좌우는 같은 여백(--ag-res)이라 화면 정가운데.
   대화(.ag-log)는 투명하고 위·양옆 가장자리로 갈수록 마스크로 더 투명. 글은 반투명 말풍선 + 흐림으로 읽힌다. 입력(.ag-comp)만 불투명.
   .ag-inline 은 디자인 페이지의 살아 있는 예시용(고정 위치·숨김을 끈다). */
:root{--ag-gut:16px;--ag-side-w:264px;--ag-rail-w:44px;--ag-top:300px;--ag-col:1040px;--ag-fade-top:72px;--ag-fade-x:56px;
  --ag-scrim-top:.44;--ag-scrim-mid:.60;--ag-scrim-bot:.82;--ag-scrim-rgb:0,0,0;   /* 2026-10-20 사용자: 아래는 진하게, 위도 대화가 읽히게 충분히 — 그라데이션으로 공간감 */
  --ag-glass:color-mix(in srgb,var(--surf) 76%,transparent);--ag-glass2:color-mix(in srgb,var(--surf) 88%,transparent);--ag-halo:color-mix(in srgb,var(--bg) 80%,transparent)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--ag-scrim-rgb:17,24,32;--ag-scrim-top:.30;--ag-scrim-mid:.44;--ag-scrim-bot:.64}}
:root[data-theme="light"]{--ag-scrim-rgb:17,24,32;--ag-scrim-top:.30;--ag-scrim-mid:.44;--ag-scrim-bot:.64}
/* (공용 --scrim 은 덮어쓰지 않는다 — 덮으면 ⌘K 팔레트 등 다른 막이 투명해진다) */
/* 떠 있는 버튼 */
.ag-fab{position:fixed;right:var(--sp-4);bottom:var(--sp-4);z-index:108;width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surf);color:var(--acc);border:1px solid var(--line2);box-shadow:var(--sh-2);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.ag-fab:hover{border-color:var(--acc);transform:translateY(-1px)}.ag-fab:active{transform:none}
.ag-fab:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ag-fab svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ag-fab .ag-fab-t{font:700 13px/1 var(--sans);letter-spacing:.04em}   /* 2026-10-20 사용자: 아이콘 대신 'AI' 글자 */
.ag-fab[aria-expanded="true"]{border-color:var(--acc)}
/* 2026-10-21 사용자: 오른쪽 아래 고정 · 바닥 줄 높이와 무관하게 어느 화면에서도 누를 수 있게(시트·서랍 위, 대화상자·팝오버 아래). 오른쪽 시트가 열리면 그 왼쪽으로 비켜 선다 */
body:has(.sheet.open) .ag-fab{right:calc(min(560px,100vw - 72px) + var(--sp-4))}body:has(.sheet.wide.open) .ag-fab{right:calc(min(780px,100vw - 72px) + var(--sp-4))}
@media (max-width:632px){body:has(.sheet.open) .ag-fab{display:none}}@media (max-width:852px){body:has(.sheet.wide.open) .ag-fab{display:none}}   /* 시트가 화면 폭을 거의 다 쓰면 버튼이 시트 바닥 동작(Archive 등)을 덮는다 — 시트가 열린 동안 숨긴다(2026-10-21 반응형) */
/* 막 — 가운데까지는 거의 투명, 바닥 쪽만 살짝 */
.ag-scrim{position:fixed;inset:0;z-index:110;background:linear-gradient(to bottom,rgba(var(--ag-scrim-rgb),var(--ag-scrim-top)) 0%,rgba(var(--ag-scrim-rgb),calc(var(--ag-scrim-top) * .5 + var(--ag-scrim-mid) * .5)) 30%,rgba(var(--ag-scrim-rgb),var(--ag-scrim-mid)) 58%,rgba(var(--ag-scrim-rgb),var(--ag-scrim-bot)) 100%);opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease-in),visibility 0s linear var(--dur-fast)}
.ag-scrim.open{opacity:1;visibility:visible;transition:opacity var(--dur-med) var(--ease-out),visibility 0s}
/* 독 */
.ag-dock{--ag-res:calc(var(--ag-gut) * 2 + var(--ag-side-w));position:fixed;top:var(--ag-top);bottom:var(--ag-gut);left:var(--ag-res);right:var(--ag-res);z-index:111;display:flex;flex-direction:column;gap:8px;min-width:0;background:transparent;border:0;pointer-events:none;
  opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity var(--dur-fast) var(--ease-in),transform var(--dur-fast) var(--ease-in),visibility 0s linear var(--dur-fast)}
.ag-dock.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-slow) var(--ease-out),visibility 0s}
html.ag-side-min .ag-dock{--ag-res:calc(var(--ag-gut) * 2 + var(--ag-rail-w))}
/* 흔적 패널(.ag-tl, 400px)이 열려 있으면 양쪽에 같은 폭을 비워 독이 가운데를 지키면서 가려지지 않게 */
@media (min-width:1101px){html:has(.ag-tl.open) .ag-dock,html.ag-side-min:has(.ag-tl.open) .ag-dock{--ag-res:calc(var(--ag-gut) * 2 + 408px)}}
.ag-dock>*{pointer-events:auto}
.ag-dock.drag::after{content:'Drop to attach';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:2px dashed var(--acc);border-radius:16px;background:color-mix(in srgb,var(--accbg) 70%,transparent);color:var(--acc);font-weight:600;pointer-events:none}
/* 도구줄 — 떠 있는 반투명 띠 */
.ag-head{flex:none;width:100%;max-width:var(--ag-col);margin:0 auto;display:flex;align-items:center;gap:var(--sp-2);padding:5px 6px 5px 12px;border-radius:12px;background:var(--ag-glass);border:1px solid color-mix(in srgb,var(--line2) 70%,transparent);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);box-shadow:var(--sh-1)}
.ag-head .ag-mark{width:9px;height:9px;border-radius:2px;background:var(--acc);box-shadow:0 0 0 2px var(--accbg);flex:none}
.ag-head h4{margin:0;font-size:var(--fs-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:40%}
.ag-head .sp{flex:1 1 auto}
.ag-head .ag-sidebtn{display:none}
.ag-state{display:inline-flex;align-items:center;gap:5px;font:var(--fs-xs) var(--mono);color:var(--tx2);border:1px solid var(--line2);border-radius:10px;padding:2px 8px;white-space:nowrap;background:var(--surf)}
.ag-state i{width:6px;height:6px;border-radius:50%;border:1.5px solid var(--acc);display:block}
.ag-state.on i{background:var(--acc)}
.ag-state.err{color:var(--err);border-color:var(--err)}.ag-state.err i{border-color:var(--err)}
/* 요청 형식 도움말 */
.ag-help{flex:none;width:100%;max-width:var(--ag-col);margin:0 auto;border:1px solid var(--line2);border-radius:12px;background:var(--ag-glass2);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 14px;font-size:var(--fs-sm);color:var(--tx2);line-height:1.55}
.ag-help[hidden]{display:none}
.ag-help .ag-fmt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:6px 0}
.ag-help .ag-fmt div{border:1px solid var(--line2);border-radius:var(--r-2);padding:6px 8px;background:var(--surf)}
.ag-help .ag-fmt b{display:block;color:var(--tx);font-size:var(--fs-sm)}.ag-help .ag-fmt small{color:var(--tx3);font-size:var(--fs-xs)}
.ag-help code{font:var(--fs-xs) var(--mono);color:var(--tx);background:var(--surf3);padding:1px 5px;border-radius:3px;overflow-wrap:anywhere}
/* 대화 — 투명, 위·양옆 가장자리 마스크 페이드 */
.ag-log{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ag-fade-top),#000 100%),linear-gradient(to right,transparent 0,#000 var(--ag-fade-x),#000 calc(100% - var(--ag-fade-x)),transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 var(--ag-fade-top),#000 100%),linear-gradient(to right,transparent 0,#000 var(--ag-fade-x),#000 calc(100% - var(--ag-fade-x)),transparent 100%);mask-composite:intersect}
.ag-thread{min-height:100%;max-width:var(--ag-col);margin:0 auto;padding:calc(var(--ag-fade-top) - 8px) var(--ag-fade-x) 6px;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;box-sizing:border-box}
.ag-msg{max-width:100%;min-width:0;font-size:var(--fs-md);line-height:1.6;color:var(--tx);overflow-wrap:anywhere;text-shadow:0 0 6px var(--ag-halo)}
.ag-msg.me{align-self:flex-end;max-width:78%;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.ag-msg.me .ag-txt{background:var(--ag-glass2);border:1px solid color-mix(in srgb,var(--line2) 70%,transparent);border-radius:14px 14px 4px 14px;padding:8px 12px;white-space:pre-wrap;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ag-msg.me .ag-ctx{font-size:var(--fs-xs);color:var(--tx3)}
.ag-msg.bot{align-self:stretch;display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px}
.ag-msg.bot>.ag-av{width:22px;height:22px;border-radius:6px;border:1px solid var(--accd);background:var(--accbg);display:flex;align-items:center;justify-content:center;margin-top:6px}
.ag-msg.bot>.ag-av i{width:8px;height:8px;border-radius:2px;background:var(--acc);display:block}
.ag-msg.bot>.ag-bd{min-width:0;display:flex;flex-direction:column;gap:8px;padding:10px 14px;border-radius:4px 14px 14px 14px;background:var(--ag-glass);border:1px solid color-mix(in srgb,var(--line2) 55%,transparent);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
.ag-msg .ag-ans{margin:0;white-space:pre-wrap}
.ag-note{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:var(--fs-xs) var(--mono);color:var(--tx2);border:1px dashed var(--line2);border-radius:var(--r-1);padding:2px 8px;background:var(--surf)}
.ag-note::before{content:'';width:6px;height:6px;border-radius:50%;border:1.5px solid var(--acc)}
.ag-mock{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font:var(--fs-xs) var(--mono);color:var(--acc);border:1px dashed var(--accd);border-radius:var(--r-1);padding:1px 7px}
.ag-sec{font:600 var(--fs-xs) var(--sans);color:var(--tx3);letter-spacing:.04em;margin-bottom:3px}
/* 처리 단계 — 펼쳐 보는 설명 가능한 흔적 */
.ag-steps{border:1px solid var(--line);border-radius:var(--r-2);background:color-mix(in srgb,var(--surf2) 70%,transparent)}
.ag-steps>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:4px 8px;font-size:var(--fs-xs);color:var(--tx2);border-radius:var(--r-2)}
.ag-steps>summary::-webkit-details-marker{display:none}
.ag-steps>summary::before{content:'';width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform var(--dur-fast) var(--ease-out);margin-right:2px}
.ag-steps[open]>summary::before{transform:rotate(45deg)}
.ag-steps>summary:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.ag-steps ol{list-style:none;margin:0;padding:2px 8px 8px 8px;display:flex;flex-direction:column;gap:2px;counter-reset:st}
.ag-steps li{display:grid;grid-template-columns:18px 64px minmax(0,1fr) auto;gap:6px;align-items:baseline;font-size:var(--fs-sm);counter-increment:st}
.ag-steps li::before{content:counter(st);font:var(--fs-xs) var(--mono);color:var(--acc);text-align:right}
.ag-steps li b{font-weight:600;color:var(--tx)}.ag-steps li span{color:var(--tx2);overflow-wrap:anywhere}.ag-steps li em{font:normal var(--fs-xs) var(--mono);color:var(--tx3);font-variant-numeric:tabular-nums}
/* 근거 칩 */
.ag-cites{display:flex;flex-wrap:wrap;gap:6px}
.ag-cite{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;font:var(--fs-sm)/1.3 var(--sans);color:var(--tx);border:1px solid var(--line2);background:var(--surf);border-radius:14px;padding:3px 10px 3px 4px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out)}
.ag-cite:hover,.ag-cite:focus-visible{border-color:var(--acc);outline:0}
.ag-cite .n{font:600 var(--fs-xs) var(--mono);color:var(--acc);background:var(--accbg);border-radius:10px;padding:1px 6px;flex:none}
.ag-cite .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:280px}
.ag-cite .k{font-size:var(--fs-xs);color:var(--tx3);flex:none}
/* 동작 */
.ag-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ag-acts .btn[aria-disabled="true"]{opacity:.55;cursor:default}
.ag-done{font-size:var(--fs-xs);color:var(--tx2);border-left:2px solid var(--acc);padding:2px 8px;background:var(--surf);border-radius:0 var(--r-1) var(--r-1) 0}
.ag-done b{color:var(--tx)}
.ag-tools{display:flex;gap:2px;align-items:center;margin:-2px -4px -4px}
.ag-tools .btn.ico.sm{width:26px;height:26px}
.ag-tools .btn.on{color:var(--acc);border-color:var(--accd)}
.ag-tools .sp{flex:1}.ag-tools time{font-size:var(--fs-xs);color:var(--tx3);font-variant-numeric:tabular-nums}
.ag-parse{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.ag-parse div{border:1px solid var(--line2);border-radius:var(--r-2);padding:5px 8px;font-size:var(--fs-sm);min-width:0;overflow-wrap:anywhere}.ag-parse div b{display:block;font-size:var(--fs-xs);color:var(--tx3);font-weight:600}
.ag-src{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.ag-src li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:baseline;font-size:var(--fs-sm);padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surf2)}
.ag-src .k{font:var(--fs-xs) var(--mono);color:var(--tx2);background:var(--surf3);border-radius:var(--r-1);padding:1px 6px;white-space:nowrap}
.ag-src code{font:var(--fs-xs) var(--mono);color:var(--tx);overflow-wrap:anywhere}.ag-src small{color:var(--tx3);margin-left:6px}
/* 기다림 · 오류 */
.ag-typing{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;color:var(--tx2);font-size:var(--fs-sm);padding:8px 12px;border-radius:14px;background:var(--ag-glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid color-mix(in srgb,var(--line2) 55%,transparent)}
.ag-typing .dots{display:inline-flex;gap:3px}.ag-typing .dots i{width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:.35;animation:ag-dot 1.1s var(--ease-out) infinite}
.ag-typing .dots i:nth-child(2){animation-delay:.15s}.ag-typing .dots i:nth-child(3){animation-delay:.3s}
@keyframes ag-dot{0%,100%{opacity:.25;transform:none}40%{opacity:1;transform:translateY(-2px)}}
.ag-skel{display:flex;flex-direction:column;gap:6px;min-width:min(420px,60vw)}
.ag-skel i{display:block;height:9px;border-radius:5px;background:linear-gradient(90deg,var(--surf3) 0%,var(--surf2) 50%,var(--surf3) 100%);background-size:200% 100%;animation:ag-shim 1.3s linear infinite}
.ag-skel i:nth-child(2){width:86%}.ag-skel i:nth-child(3){width:62%}
@keyframes ag-shim{from{background-position:200% 0}to{background-position:-200% 0}}
.ag-err{align-self:stretch;display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;border-radius:12px;border:1px solid var(--err);background:color-mix(in srgb,var(--errbg) 85%,transparent);color:var(--tx);font-size:var(--fs-sm)}
.ag-err b{color:var(--err)}
/* 빈 상태 */
.ag-empty{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--ag-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid color-mix(in srgb,var(--line2) 55%,transparent);text-shadow:0 0 6px var(--ag-halo)}
.ag-empty b{font-size:var(--fs-lg);color:var(--tx)}.ag-empty p{margin:0;color:var(--tx2);font-size:var(--fs-sm);line-height:1.55}
.ag-chips{display:flex;flex-wrap:wrap;gap:6px}
.ag-chip{display:inline-flex;align-items:center;max-width:100%;text-align:left;font:var(--fs-sm)/1.35 var(--sans);color:var(--tx2);border:1px solid var(--line2);background:var(--surf);border-radius:16px;padding:5px 11px;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ag-chip:hover,.ag-chip:focus-visible{border-color:var(--acc);color:var(--tx);outline:0}
/* 입력 — 유일하게 불투명한 면 */
.ag-comp{flex:none;position:relative;width:100%;max-width:var(--ag-col);margin:0 auto;box-sizing:border-box;background:var(--surf);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--sh-3);padding:8px 10px 6px;transition:border-color var(--dur-fast) var(--ease-out)}
.ag-comp:focus-within{border-color:var(--accd)}
.ag-ctxrow{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:4px;min-height:0}
.ag-ctxrow:empty{display:none}
.ag-tag{display:inline-flex;align-items:center;gap:5px;max-width:min(100%,420px);min-width:0;height:24px;box-sizing:border-box;font-size:var(--fs-xs);color:var(--tx2);border:1px solid var(--line2);background:var(--surf2);border-radius:12px;padding:0 4px 0 9px}
.ag-tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ag-tag>b{font-weight:600;color:var(--tx);flex:none}
.ag-tag.tenant{border-color:var(--accd);color:var(--acc);background:var(--accbg);padding-right:9px;cursor:pointer}
.ag-tag.ghost{border-style:dashed;background:transparent;cursor:pointer;padding-right:9px}
.ag-tag .x{width:18px;height:18px;border-radius:50%;border:0;background:transparent;color:var(--tx3);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:none}
.ag-tag .x:hover,.ag-tag .x:focus-visible{background:var(--surf3);color:var(--tx);outline:0}
.ag-tag .x svg{width:10px;height:10px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.ag-tag.file{position:relative;overflow:hidden}
.ag-tag.file .ag-pbar{position:absolute;left:0;bottom:0;height:2px;background:var(--acc);width:0;transition:width var(--dur-fast) linear}
.ag-tag.file.done .ag-pbar{display:none}.ag-tag.file.fail{border-color:var(--err);color:var(--err)}
.ag-tag.file .pct{font:var(--fs-xs) var(--mono);color:var(--tx3);font-variant-numeric:tabular-nums}
.ag-tag.file .retry{border:0;background:transparent;color:var(--err);font-size:var(--fs-xs);cursor:pointer;text-decoration:underline;padding:0 2px}
.ag-in{display:block;width:100%;box-sizing:border-box;min-height:0!important;height:24px;max-height:200px;resize:none!important;border:0;outline:0;background:transparent;color:var(--tx);font:var(--fs-md)/1.6 var(--sans);padding:3px 2px;overflow-y:auto}
.ag-in::placeholder{color:var(--tx3)}
.ag-live{font-size:var(--fs-sm);color:var(--tx3);padding:0 2px;font-style:italic;min-height:0}
.ag-live:empty{display:none}
.ag-ctl{display:flex;align-items:center;gap:4px;margin-top:4px}
.ag-ctl .sp{flex:1}
.ag-ctl .hint{font-size:var(--fs-xs);color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ag-ctl .btn.ico.sm{width:30px;height:30px}
.ag-ctl .btn.rec{color:var(--accfg);background:var(--acc);border-color:var(--acc)}
.ag-ctl .btn.rec svg{animation:ag-rec 1.2s ease-in-out infinite}
@keyframes ag-rec{50%{opacity:.45}}
.ag-ctl .rect{font:var(--fs-xs) var(--mono);color:var(--acc);font-variant-numeric:tabular-nums}
.ag-send{width:32px;height:32px;border-radius:9px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--acc);color:var(--accfg);background:var(--acc);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),opacity var(--dur-fast)}
.ag-send:hover:not(:disabled){background:var(--acc2);border-color:var(--acc2)}.ag-send:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line2);color:var(--tx3);background:transparent}
.ag-send:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ag-send svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag-send.stop svg rect{fill:currentColor;stroke:none}
.ag-foot{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:6px;font-size:var(--fs-xs);color:var(--tx3)}
/* / 명령 목록 */
.ag-slash{position:absolute;left:10px;bottom:calc(100% + 6px);width:min(360px,calc(100% - 20px));background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-3);box-shadow:var(--sh-3);padding:4px;z-index:3}
.ag-slash[hidden]{display:none}
.ag-slash [role="option"]{display:grid;grid-template-columns:76px minmax(0,1fr);gap:8px;align-items:baseline;padding:6px 9px;border-radius:var(--r-2);cursor:pointer;font-size:var(--fs-sm)}
.ag-slash [role="option"] b{font:600 var(--fs-sm) var(--mono);color:var(--tx)}.ag-slash [role="option"] span{color:var(--tx2)}
.ag-slash [role="option"][aria-selected="true"]{background:var(--accbg);outline:1px solid var(--accd)}
.ag-slash [role="option"][aria-selected="true"] b{color:var(--acc)}
/* 세션 사이드바 */
.ag-side{position:fixed;left:var(--ag-gut);top:var(--ag-top);bottom:var(--ag-gut);width:var(--ag-side-w);z-index:112;display:flex;flex-direction:column;min-height:0;box-sizing:border-box;background:var(--ag-glass2);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--sh-2);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0;visibility:hidden;transform:translateX(-10px);transition:opacity var(--dur-fast) var(--ease-in),transform var(--dur-fast) var(--ease-in),visibility 0s linear var(--dur-fast),width var(--dur-med) var(--ease-out)}
.ag-side.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-slow) var(--ease-out),visibility 0s,width var(--dur-med) var(--ease-out)}
.ag-side .sh{display:flex;align-items:center;gap:6px;padding:8px 8px 6px 10px;flex:none}
.ag-side .sh select{flex:1;min-width:0}
.ag-side .sn{display:flex;gap:6px;padding:0 8px 6px;flex:none}
.ag-side .sn .btn{flex:1;justify-content:center}
.ag-side .ss{padding:0 8px 6px;flex:none}.ag-side .ss input{width:100%;box-sizing:border-box}
.ag-side .sv{display:flex;gap:0;margin:0 8px 6px;flex:none}
.ag-side .sv button{flex:1}
.ag-side .sl{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 6px 8px;scrollbar-width:thin}
.ag-side .sg{font:600 var(--fs-xs) var(--sans);color:var(--tx3);letter-spacing:.04em;padding:8px 6px 3px}
.ag-side .si{position:relative;display:flex;align-items:center;gap:4px;border-radius:var(--r-2);padding:0 2px 0 0;min-height:32px}
.ag-side .si>.go{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;border:0;background:transparent;color:var(--tx);text-align:left;padding:5px 8px;border-radius:var(--r-2);cursor:pointer;font:var(--fs-sm)/1.35 var(--sans)}
.ag-side .si>.go span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-side .si>.go small{font-size:var(--fs-xs);color:var(--tx3);font-variant-numeric:tabular-nums}
.ag-side .si:hover{background:var(--surf3)}
.ag-side .si.on{background:var(--accbg);box-shadow:inset 0 0 0 1px var(--accd)}
.ag-side .si>.go:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ag-side .si .pin{width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none;margin-left:6px}
.ag-side .si .ops{display:none;gap:1px;flex:none}
.ag-side .si:hover .ops,.ag-side .si:focus-within .ops,.ag-side .si.menu .ops{display:flex}
.ag-side .si .ops .btn.ico.sm{width:24px;height:24px}
.ag-side .si input.inp{flex:1;min-width:0;height:28px;margin:2px 4px}
.ag-side .se{padding:18px 10px;color:var(--tx3);font-size:var(--fs-sm);text-align:center;line-height:1.55}
.ag-side .sf{flex:none;display:flex;align-items:center;gap:6px;padding:6px 10px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--tx3)}
.ag-side .sf .sp{flex:1}
.ag-side .rail{display:none;flex-direction:column;align-items:center;gap:6px;padding:8px 0}
html.ag-side-min .ag-side{width:var(--ag-rail-w)}
html.ag-side-min .ag-side>:not(.rail){display:none}
html.ag-side-min .ag-side .rail{display:flex}
/* 근거 미리보기 시트 */
.ag-sheet{position:fixed;top:var(--ag-top);right:var(--ag-gut);bottom:var(--ag-gut);width:min(440px,calc(100vw - 2 * var(--ag-gut)));z-index:113;display:flex;flex-direction:column;min-height:0;box-sizing:border-box;background:var(--surf);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity var(--dur-fast) var(--ease-in),transform var(--dur-fast) var(--ease-in),visibility 0s linear var(--dur-fast)}
.ag-sheet.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-slow) var(--ease-out),visibility 0s}
.ag-sheet .hh{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line);flex:none}
.ag-sheet .hh h5{margin:0;font-size:var(--fs-md);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-sheet .bb{flex:1;min-height:0;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-sm)}
.ag-sheet dl{display:grid;grid-template-columns:72px minmax(0,1fr);gap:4px 10px;margin:0}
.ag-sheet dt{color:var(--tx3)}.ag-sheet dd{margin:0;color:var(--tx);overflow-wrap:anywhere}
.ag-sheet blockquote{margin:0;padding:8px 10px;border-left:2px solid var(--acc);background:var(--surf2);border-radius:0 var(--r-2) var(--r-2) 0;white-space:pre-wrap;line-height:1.55}
.ag-sheet pre{margin:0;padding:8px 10px;background:var(--surf2);border:1px solid var(--line);border-radius:var(--r-2);white-space:pre-wrap;overflow-wrap:anywhere;font:var(--fs-xs)/1.55 var(--mono);max-height:320px;overflow:auto}
.ag-sheet mark{background:var(--accbg);color:var(--acc);padding:0 1px;border-radius:2px}
.ag-sheet .vv{display:flex;flex-direction:column;gap:3px}
.ag-sheet .vv div{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:6px;font-size:var(--fs-xs);padding:3px 6px;border:1px solid var(--line);border-radius:var(--r-1)}
.ag-sheet .vv div b{font-family:var(--mono);color:var(--acc)}.ag-sheet .vv time{color:var(--tx3)}
/* 디자인 페이지의 살아 있는 예시 */
.ag-dock.ag-inline{position:relative;inset:auto;top:auto;bottom:auto;left:auto;right:auto;z-index:auto;opacity:1;visibility:visible;transform:none;width:100%;height:auto;pointer-events:auto}
.ag-dock.ag-inline .ag-log{max-height:none}
.ag-side.ag-inline{position:relative;inset:auto;top:auto;bottom:auto;left:auto;z-index:auto;opacity:1;visibility:visible;transform:none;height:auto}
.ag-fab.ag-inline{position:relative;left:auto;bottom:auto;z-index:auto}
html.ag-lock .screen{overflow:hidden!important}
/* 반응형 — 1100 이하: 사이드바는 덮는 서랍(독 머리의 버튼) · 768 이하: 독 전체 폭 */
@media (max-width:1100px){
  .ag-dock,html.ag-side-min .ag-dock{--ag-res:var(--ag-gut)}
  .ag-head .ag-sidebtn{display:inline-flex}
  .ag-side,.ag-side.open{opacity:0;visibility:hidden;transform:translateX(-10px);width:min(var(--ag-side-w),calc(100vw - 2 * var(--ag-gut)))!important;z-index:114;box-shadow:var(--sh-3);background:var(--surf)}
  .ag-side.open.show{opacity:1;visibility:visible;transform:none}
  html.ag-side-min .ag-side>:not(.rail){display:flex}html.ag-side-min .ag-side .sl{display:block}html.ag-side-min .ag-side .rail{display:none}
  .ag-side .sh .ag-collapse{display:none}
}
@media (max-width:768px){
  .ag-dock,html.ag-side-min .ag-dock{--ag-res:0px;bottom:0}
  :root{--ag-fade-x:20px}
  .ag-comp{border-radius:16px 16px 0 0;border-bottom:0}
  .ag-head{border-radius:0}
  .ag-help .ag-fmt,.ag-parse{grid-template-columns:1fr}.ag-msg.me{max-width:92%}.ag-head .ag-state{display:none}
  .ag-ctl .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ag-dock,.ag-dock.open,.ag-side,.ag-side.open,.ag-sheet,.ag-sheet.open{transform:none!important}
  .ag-dock,.ag-scrim,.ag-side,.ag-sheet{transition:opacity 60ms linear,visibility 0s linear 60ms!important}
  .ag-dock.open,.ag-scrim.open,.ag-side.open,.ag-sheet.open{transition:opacity 60ms linear,visibility 0s!important}
  .ag-fab,.ag-fab:hover{transform:none;transition:none}
  .ag-typing .dots i,.ag-skel i,.ag-ctl .btn.rec svg{animation:none}
  .ag-steps>summary::before{transition:none}
}

/* ── §6 이어서: 에이전트 흔적 · 화면 강조 · 묻기 메뉴 · 권한 · 에이전트 초안 (B9, 설계/명세/화면_구조_감사_20261020.md §4 P0-A1·A2·A5·H2, P1-A6·A7·A8, P2-A11) ──
   .ag-trace 흔적 띠(28px, 에이전트 버튼 왼쪽 · 독이 열리면 숨김) · .ag-tl 오른쪽 흔적 패널 · .ag-hl-layer/.ag-hl-box 화면 강조(번호 배지 + 윤곽 펄스, 3초) ·
   .ag-perm 독 머리의 허락 범위 · .ag-toast-act 토스트 안 동작 버튼(되돌리기) · .ag-draft 에이전트 초안 배지(확정 전 점선) */
.ag-head:has(.ag-perm){flex-wrap:wrap;row-gap:2px}
.ag-perm{order:20;flex:1 0 100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:var(--fs-xs);line-height:16px;color:var(--tx2);padding:0 0 1px 51px}
.ag-perm::before{content:'Scope';color:var(--acc);margin-right:6px;font-weight:600}
.ag-acts .btn.ag-write{border-style:dashed}
.ag-toast-act{flex:none;align-self:center;margin-left:auto;padding:3px 10px;border-radius:var(--r-1);border:1px solid color-mix(in srgb,var(--bg) 50%,transparent);background:transparent;color:var(--bg);font:600 12px/1.4 var(--sans);cursor:pointer}
.ag-toast-act:hover,.ag-toast-act:focus-visible{background:color-mix(in srgb,var(--bg) 18%,transparent);outline:0}
.ag-trace{position:fixed;right:calc(var(--sp-4) + 52px);bottom:calc(var(--sp-4) + 6px);z-index:84;height:28px;box-sizing:border-box;max-width:min(560px,calc(100vw - 84px));display:flex;align-items:center;gap:8px;padding:0 3px 0 10px;border-radius:14px;background:var(--surf);border:1px solid var(--line2);box-shadow:var(--sh-2);font-size:var(--fs-sm);color:var(--tx2)}
.ag-trace[hidden],html.ag-lock .ag-trace{display:none}
/* 2026-10-21 에이전트 버튼이 오른쪽 아래로 옮겨 감 — 띠도 버튼 왼쪽에 세로 가운데 맞춤, 시트가 열려 버튼이 밀리면 같이 민다 */
body:has(.sheet.open) .ag-trace{right:calc(min(560px,100vw - 72px) + var(--sp-4) + 52px)}body:has(.sheet.wide.open) .ag-trace{right:calc(min(780px,100vw - 72px) + var(--sp-4) + 52px)}
@media (max-width:632px){body:has(.sheet.open) .ag-trace{display:none}}@media (max-width:852px){body:has(.sheet.wide.open) .ag-trace{display:none}}
.ag-trace .mk,.ag-tl .mk{width:8px;height:8px;border-radius:2px;background:var(--acc);box-shadow:0 0 0 2px var(--accbg);flex:none}
.ag-trace b{color:var(--tx);font-weight:600;white-space:nowrap}
.ag-trace .n{color:var(--acc);font:var(--fs-xs) var(--mono);white-space:nowrap}
.ag-trace .d{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-trace .rp{color:var(--acc);font-size:var(--fs-xs);white-space:nowrap}
.ag-trace .btn.sm{height:22px;padding:0 8px;flex:none}
/* 닫기 x — 테두리·배경 없는 고스트, 올리면 배경으로 누를 수 있다는 것만 알린다(2026-10-20 사용자) */.ag-trace .ag-tr-x{width:22px;padding:0;border:0!important;background:transparent!important;box-shadow:none!important;color:var(--tx3);border-radius:6px}.ag-trace .ag-tr-x:hover,.ag-trace .ag-tr-x:focus-visible{background:var(--surf2)!important;color:var(--tx)}.ag-trace .ag-tr-x svg{width:13px;height:13px}
.ag-tl{position:fixed;top:calc(var(--h-top) + 8px);right:8px;bottom:8px;width:min(400px,calc(100vw - 16px));z-index:116;display:flex;flex-direction:column;min-height:0;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-3);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transform:translateX(16px);transition:opacity var(--dur-fast) var(--ease-in),transform var(--dur-fast) var(--ease-in),visibility 0s linear var(--dur-fast)}
.ag-tl.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-med) var(--ease-out),transform var(--dur-med) var(--ease-out),visibility 0s}
.ag-tl .tl-hd{flex:none;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 12px;border-bottom:1px solid var(--line)}
.ag-tl .tl-hd h5{margin:0;font-size:var(--fs-md);white-space:nowrap}.ag-tl .tl-hd .sp{flex:1}.ag-tl .tl-hd .faint{font-size:var(--fs-xs);white-space:nowrap}
.ag-tl .tl-hd .btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ag-tl .tl-hd .btn:not(.ico) svg{margin-right:4px}
.ag-tl .tl-b{flex:1 1 auto;min-height:0;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:10px}
.ag-tl .tl-g{border:1px solid var(--line);border-radius:var(--r-2);padding:8px 10px;display:flex;flex-direction:column;gap:6px;background:var(--bg);min-width:0}
.ag-tl .tl-h{display:flex;gap:6px;align-items:baseline;min-width:0}.ag-tl .tl-h .k{font-size:var(--fs-xs);color:var(--acc);flex:none}
.ag-tl .tl-h b{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere;color:var(--tx)}.ag-tl time{font:var(--fs-xs) var(--mono);color:var(--tx3);flex:none}
.ag-tl .tl-ctx{align-self:flex-start;max-width:100%;font-size:var(--fs-xs);color:var(--tx2);border:1px solid var(--line2);border-radius:10px;padding:1px 8px;background:var(--surf);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-tl .tl-ctx:hover{border-color:var(--acc);color:var(--tx)}
.ag-tl .tl-sec{font-size:var(--fs-xs);color:var(--tx3)}
.ag-tl .tl-steps,.ag-tl .tl-ev,.ag-tl .tl-acts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.ag-tl .tl-acts li{font-size:var(--fs-sm);color:var(--tx2);padding-left:8px;border-left:2px solid var(--line2)}
.ag-tl .tl-step{display:grid;grid-template-columns:16px auto minmax(0,1fr) auto;gap:6px;align-items:center;width:100%;text-align:left;padding:3px 6px;border-radius:var(--r-1);background:transparent;border:0;color:var(--tx2);cursor:pointer;font:var(--fs-sm)/1.4 var(--sans)}
.ag-tl .tl-step:hover:not(:disabled),.ag-tl .tl-go:hover,.ag-tl .tl-step:focus-visible,.ag-tl .tl-go:focus-visible{background:var(--surf2);color:var(--tx);outline:0}
.ag-tl .tl-step:disabled{cursor:default}
.ag-tl .tl-step i{font:600 10px/16px var(--mono);font-style:normal;width:16px;height:16px;border-radius:8px;background:var(--accbg);color:var(--acc);text-align:center}
.ag-tl .tl-step b{color:var(--tx);white-space:nowrap}.ag-tl .tl-step span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-tl .tl-step em,.ag-tl .tl-e em{font:var(--fs-xs) var(--mono);color:var(--tx3);font-style:normal;flex:none}
.ag-tl .tl-e{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);min-width:0;min-height:24px}
.ag-tl .tl-e>time{margin-left:auto}
.ag-tl .tl-e .k{font-size:var(--fs-xs);color:var(--acc);flex:none}
.ag-tl .tl-e .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}
.ag-tl .tl-go{display:flex;gap:6px;align-items:baseline;min-width:0;flex:1 1 auto;text-align:left;background:transparent;border:0;padding:2px 4px;border-radius:var(--r-1);cursor:pointer;color:inherit;font:inherit}
.ag-tl span.tl-go{cursor:default}
.ag-tl .tl-e.undone .t{text-decoration:line-through;color:var(--tx3)}
.ag-tl .tl-e.api{min-height:18px;padding-left:4px}.ag-tl .tl-e.api code{font:var(--fs-xs) var(--mono);color:var(--tx3);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ag-tl .tl-e.api .st{font:var(--fs-xs) var(--mono);color:var(--ok);flex:none}.ag-tl .tl-e.api .st.bad{color:var(--err)}
.ag-tl .tl-busy{font-size:var(--fs-sm);color:var(--tx2)}.ag-tl .tl-busy .dots{display:none}.ag-tl .tl-fail{font-size:var(--fs-sm);color:var(--err)}
.ag-tl .ag-cites{display:flex;flex-wrap:wrap;gap:4px}
.ag-hl-layer{position:fixed;inset:0;pointer-events:none;z-index:109}
.ag-hl-box{position:fixed;box-sizing:border-box;border:2px solid var(--acc);border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 22%,transparent);animation:ag-hl-pulse .9s var(--ease-out) 3;transition:opacity .4s var(--ease-in)}
.ag-hl-box.still{animation:none}.ag-hl-box.out{opacity:0}
.ag-hl-box i{position:absolute;left:-9px;top:-9px;min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;background:var(--acc);color:var(--accfg);font:600 10.5px/18px var(--sans);font-style:normal;text-align:center}
@keyframes ag-hl-pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--acc) 10%,transparent)}}
.popover.ag-cm{z-index:140}
.btn.ag-askbtn{align-self:flex-start;margin:6px 0 2px;gap:5px}.btn.ag-askbtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ag-draft{display:inline-flex;align-items:center;font:var(--fs-xs)/1.5 var(--sans);padding:0 7px;border-radius:10px;border:1px dashed var(--acc);color:var(--acc);background:var(--accbg);white-space:nowrap}
.ag-draft.done{border-style:solid;border-color:var(--line2);background:transparent;color:var(--tx2)}
.bcard.ag-made{border-style:dashed;border-color:var(--acc)}
@media (prefers-reduced-motion:reduce){.ag-tl,.ag-tl.open{transition:opacity 60ms linear,visibility 0s!important;transform:none}.ag-hl-box{animation:none}}
/* ───── §A 관리 콘솔 부품 (2026-10-20) — 섹션 내비 · 사이드 시트 · 상태 알약 · 단계 표시 · 끌어놓기 영역 · 타임라인 · 보드 ─────
   .snav   왼쪽 섹션 내비(.eyebrow 묶음 + button.on). 1024px 이하에서 위쪽 가로 탭(가로 스크롤)으로 접힌다.
   .sheet  오른쪽에서 들어오는 사이드 시트 = .sh-h 머리(제목·메타·닫기) + .sh-b 본문(스크롤) + .sh-f 동작. 뒤에 .sheet-scrim(라이트 .34 / 다크 .52).
           Esc · 바깥 클릭 · 닫기 버튼이 같은 닫기 함수 하나로 간다(화면 쪽 책임). 대화상자(.dlg)가 떠 있으면 Esc 는 대화상자가 먼저 받는다.
   .pill   상태 알약: 점 + 글자. 상태색만(ok·warn·err·info), 실행 중 .run(점이 숨쉰다), 꺼짐·보관 .off(점선). 주조색 레드는 쓰지 않는다.
   .stepper 단계 표시(li.done · li.cur · li.off). .dropzone 끌어놓기 영역(.over) + .dz-list > .dz-it 파일별 진행(.prog 재사용).
   .tl     타임라인(.tl-day 날짜 머리 · .tl-it 시각 | 점 | 내용, 점 색 .ok/.warn/.err/.info). .board 상태별 열(.bcol) + 카드(.bcard, 선택은 외곽선). .l3 세 줄 채움 표시. */
:root{--sheet-w:560px;--sheet-scrim:rgba(0,0,0,.52)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--sheet-scrim:rgba(17,24,32,.34)}}
:root[data-theme="light"]{--sheet-scrim:rgba(17,24,32,.34)}
/* 섹션 내비 */
.snav{display:flex;flex-direction:column;gap:1px;padding:var(--sp-2) 0;background:var(--surf);border-right:1px solid var(--line);overflow:auto;min-width:0;min-height:0}
.snav .eyebrow{padding:10px var(--sp-3) 4px}
.snav button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px var(--sp-3);color:var(--tx2);font-size:var(--fs-sm);border-left:2px solid transparent;white-space:nowrap;flex:none}
.snav button:hover{color:var(--tx);background:var(--surf2)}
.snav button.on{color:var(--acc);border-left-color:var(--acc);font-weight:600}
.snav button svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.snav button .ct{margin-left:auto;font:var(--fs-xs) var(--mono);color:var(--tx3);font-weight:400}.snav button .ct:empty{display:none}
.snav button .ct.warn{color:var(--warn)}.snav button .ct.err{color:var(--err)}
@media (max-width:1024px){
  .snav{flex-direction:row;align-items:stretch;border-right:0;border-bottom:1px solid var(--line);padding:0 var(--sp-2);overflow-x:auto;overflow-y:hidden;gap:0}
  .snav .eyebrow{display:none}
  .snav button{width:auto;border-left:0;border-bottom:2px solid transparent;padding:9px 10px}
  .snav button.on{border-bottom-color:var(--acc)}.snav button .ct{margin-left:2px}
}
/* 사이드 시트 */
.sheet-scrim{position:fixed;inset:0;z-index:95;background:var(--sheet-scrim);opacity:0;visibility:hidden;transition:opacity var(--dur-fast) var(--ease-in),visibility 0s linear var(--dur-fast)}
.sheet-scrim.open{opacity:1;visibility:visible;transition:opacity var(--dur-med) var(--ease-out),visibility 0s}
.sheet{position:fixed;top:0;right:0;bottom:0;z-index:96;width:min(var(--sheet-w),100vw);display:flex;flex-direction:column;background:var(--surf);border-left:1px solid var(--line2);box-shadow:var(--sh-3);transform:translateX(104%);visibility:hidden;transition:transform var(--dur-fast) var(--ease-in),visibility 0s linear var(--dur-fast)}
.sheet.open{transform:none;visibility:visible;transition:transform var(--dur-slow) var(--ease-out),visibility 0s}
.sheet.wide{--sheet-w:780px}
.sheet .sh-h{display:flex;align-items:center;gap:var(--sp-2);padding:8px 10px 8px 16px;border-bottom:1px solid var(--line);flex:none;min-height:var(--h-bar)}
.sheet .sh-h h4{margin:0;font-size:var(--fs-lg);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet .sh-h .sp{flex:1}
.sheet .sh-b{flex:1;overflow:auto;padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-3);min-height:0}.sheet .sh-b>*{flex-shrink:0}
.sheet .sh-f{flex:none;display:flex;align-items:center;gap:var(--sp-2);padding:10px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.sheet .sh-f .sp{flex:1}
.sheet .sh-sec{display:flex;flex-direction:column;gap:6px;min-width:0}
.sheet .sh-sec>h5{margin:0;font-size:var(--fs-sm);color:var(--tx2);font-weight:600;display:flex;align-items:center;gap:6px}
.sheet .sh-sec>h5 small{font-weight:400;color:var(--tx3)}
/* 상태 알약 */
.pill{display:inline-flex;align-items:center;gap:5px;font:var(--fs-xs)/1.5 var(--sans);padding:1px 8px 1px 7px;border-radius:10px;border:1px solid var(--line2);color:var(--tx2);background:var(--surf2);white-space:nowrap;vertical-align:middle}
.pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--tx3);flex:none;box-sizing:border-box}
.pill.ok{color:var(--ok);border-color:var(--ok);background:var(--okbg)}.pill.ok::before{background:var(--ok)}
.pill.warn{color:var(--warn);border-color:var(--warn);background:var(--warnbg)}.pill.warn::before{background:var(--warn)}
.pill.err{color:var(--err);border-color:var(--err);background:var(--errbg)}.pill.err::before{background:var(--err)}
.pill.info{color:var(--info);border-color:var(--info);background:var(--infobg)}.pill.info::before{background:var(--info)}
.pill.run{color:var(--tx);border-color:var(--line2)}.pill.run::before{background:var(--ok);animation:ds-pill 1.2s ease-in-out infinite}
.pill.off{color:var(--tx3);background:transparent;border-style:dashed}.pill.off::before{background:transparent;border:1.5px solid var(--tx3)}
@keyframes ds-pill{50%{opacity:.25}}
/* 단계 표시 */
.stepper{display:flex;align-items:center;list-style:none;margin:0;padding:0;flex-wrap:wrap;row-gap:6px}
.stepper li{display:flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--tx3);white-space:nowrap}
.stepper li+li::before{content:'';width:22px;height:1px;background:var(--line2);margin:0 8px}
.stepper li i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line2);display:inline-flex;align-items:center;justify-content:center;font:600 10px/1 var(--mono);font-style:normal;color:var(--tx3);flex:none}
.stepper li.done{color:var(--tx2)}.stepper li.done i{border-color:var(--ok);color:var(--ok)}
.stepper li.cur{color:var(--tx);font-weight:600}.stepper li.cur i{border-color:var(--acc);color:var(--acc);box-shadow:0 0 0 3px var(--accbg)}
.stepper li.off{color:var(--tx3);text-decoration:line-through}
/* 끌어놓기 영역 */
.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:var(--sp-5) var(--sp-4);border:1.5px dashed var(--line2);border-radius:var(--r-3);background:var(--surf2);color:var(--tx2);font-size:var(--fs-sm);cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.dropzone:hover,.dropzone:focus-visible{border-color:var(--accd);outline:0}
.dropzone.over{border-color:var(--acc);background:var(--accbg);color:var(--tx)}
.dropzone b{color:var(--tx);font-size:var(--fs-md)}.dropzone small{color:var(--tx3);font-size:var(--fs-xs)}
.dropzone svg{width:22px;height:22px;stroke:var(--tx3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dropzone input[type=file]{display:none}
.dz-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.dz-it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surf);font-size:var(--fs-sm)}
.dz-it .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dz-it .sz{font:var(--fs-xs) var(--mono);color:var(--tx3);white-space:nowrap}
.dz-it .prog{grid-column:1/-1}.dz-it .msg{grid-column:1/-1;font-size:var(--fs-xs);color:var(--tx3);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.dz-it.err .msg{color:var(--err)}.dz-it.ok .msg{color:var(--tx2)}
/* 타임라인 */
.tl{list-style:none;margin:0;padding:0}
.tl-day{font:600 var(--fs-xs) var(--sans);color:var(--tx3);padding:10px 0 2px;letter-spacing:.02em}
.tl-it{display:grid;grid-template-columns:44px 14px minmax(0,1fr);gap:0 8px;padding:5px 0;font-size:var(--fs-sm)}
.tl-it .t{font:var(--fs-xs)/1.7 var(--mono);color:var(--tx3);text-align:right}
.tl-it .d{position:relative}
.tl-it .d::before{content:'';position:absolute;left:6px;top:-5px;bottom:-5px;width:1px;background:var(--line2)}
.tl-it .d::after{content:'';position:absolute;left:2px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--surf);border:1.5px solid var(--tx3);box-sizing:border-box}
.tl-it.ok .d::after{border-color:var(--ok)}.tl-it.warn .d::after{border-color:var(--warn)}.tl-it.err .d::after{border-color:var(--err)}.tl-it.info .d::after{border-color:var(--info);background:var(--infobg)}
.tl-it .bd{min-width:0;overflow-wrap:anywhere;line-height:1.5}.tl-it .bd small{color:var(--tx3);margin-left:6px}
/* 보드 */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);align-items:start}
.bcol{background:var(--surf2);border:1px solid var(--line);border-radius:var(--r-3);display:flex;flex-direction:column;min-height:120px;min-width:0}
.bcol>h5{margin:0;padding:8px 10px;font-size:var(--fs-sm);display:flex;gap:6px;align-items:center;border-bottom:1px solid var(--line)}
.bcol>h5 .ct{margin-left:auto;font:var(--fs-xs) var(--mono);color:var(--tx3);font-weight:400}
.bcol .bl{padding:8px;display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:64vh}
.bcard{text-align:left;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-2);padding:8px 10px;font-size:var(--fs-sm);cursor:pointer;display:flex;flex-direction:column;gap:5px;min-width:0;color:var(--tx);width:100%}
.bcard:hover{border-color:var(--accd)}.bcard.on{outline:1px solid var(--acc);border-color:var(--acc)}
.bcard .bt{font-weight:600;overflow-wrap:anywhere;line-height:1.4}.bcard .bm{display:flex;gap:6px;flex-wrap:wrap;align-items:center;color:var(--tx3);font-size:var(--fs-xs)}
.l3{display:inline-flex;gap:2px;align-items:center}.l3 i{width:7px;height:7px;border-radius:50%;border:1px solid var(--tx3);box-sizing:border-box}.l3 i.on{background:var(--ok);border-color:var(--ok)}
@media (max-width:1100px){.board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.board{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.sheet,.sheet.open,.sheet-scrim,.sheet-scrim.open{transition:opacity 60ms linear,visibility 0s!important;transform:none}.sheet:not(.open){opacity:0}.pill.run::before{animation:none}}

/* ═════ §S 옆 패널(.sidepanel) — 화면 오른쪽 상세 패널의 공용 부품(2026-10-20). ETL 캔버스 검사기(.insp)와 같은 모양:
   머리줄이 도구줄과 같은 높이·같은 선(--h-bar 44), 접기 단추는 패널 머리 오른쪽, 접으면 44px 레일(펴기 단추만), 왼쪽 테두리를 끌어 너비(DS.sidePanel).
   쓰는 곳: 계보(#lg-side). 캔버스는 iframe 이라 같은 수치를 자기 CSS 에 둔다 ═════ */
.sidepanel{--sp-w:clamp(280px,22vw,360px);position:relative;width:var(--sp-w);min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surf);border-left:1px solid var(--line);overflow:hidden;transition:width .2s ease}
.sidepanel .sp-h{display:flex;align-items:center;gap:8px;height:var(--h-bar,44px);min-height:var(--h-bar,44px);padding:0 6px 0 14px;border-bottom:1px solid var(--line);flex:none}
.sidepanel .sp-t{flex:1;min-width:0;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidepanel .sp-h .btn.ico{width:30px;height:30px;flex:none}
.sidepanel .sp-b{flex:1;min-height:0;overflow:auto}
.sidepanel.closed{width:44px!important}
.sidepanel.closed .sp-h{padding:0;justify-content:center}
.sidepanel.closed .sp-h>*:not(.sp-tg),.sidepanel.closed>*:not(.sp-h){display:none!important}
.sidepanel .sp-rz{position:absolute;left:0;top:0;bottom:0;width:7px;cursor:col-resize;z-index:5;touch-action:none}
.sidepanel .sp-rz::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;transition:background .15s,box-shadow .15s}
.sidepanel .sp-rz:hover::after,.sidepanel .sp-rz:focus-visible::after,.sidepanel.rzing .sp-rz::after{background:var(--acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent)}
.sidepanel .sp-rz:focus-visible{outline:none}
.sidepanel.rzing{transition:none;user-select:none}.sidepanel.rzing *{cursor:col-resize!important}
.sidepanel.closed .sp-rz{display:none}
@media (prefers-reduced-motion:reduce){.sidepanel{transition:none}}

/* ═════ §N 알림 센터 · 계획 카드 · 구조 diff (2026-10-21) — 계약: 설계/명세/운영기능_형상_테스트셋_성능_모니터링_알림_20261020.md §1·§6·§7.
   .hd-bell 머리줄 종(읽지 않은 수 .nt-cnt) · .nt-panel 알림 목록 팝오버(.open) · .nt-item 알림 한 건(.sev-info/warn/error/critical · .st-unread/read/acked/resolved)
   .plan-card 에이전트 계획(단계 .plan-step · 승인 종류 .ap-none/confirm/typed_phrase/forbidden) · .dfv 구조 diff(요약 칩 · 변경 표 · unified). 색은 레드 계열 토큰만 ═════ */
.apptop .hd-bell{position:relative;width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-2);background:transparent;color:var(--tx2);cursor:pointer;flex:none;transition:background var(--t-fast),color var(--t-fast)}
.apptop .hd-bell:hover,.apptop .hd-bell:focus-visible{background:var(--surf2);color:var(--tx);outline:0}
.apptop .hd-bell[aria-expanded="true"]{color:var(--acc);background:var(--accbg)}
.apptop .hd-bell svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hd-bell .nt-cnt{position:absolute;top:1px;right:0;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:var(--acc);color:var(--accfg);font:600 9.5px/15px var(--mono);text-align:center;box-shadow:0 0 0 2px var(--surf);font-variant-numeric:tabular-nums}
.hd-bell .nt-cnt[hidden]{display:none}
.hd-bell.ring svg{animation:nt-ring .9s ease-in-out 1}
@keyframes nt-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}80%{transform:rotate(-4deg)}}
.nt-panel{position:fixed;top:calc(var(--h-top,48px) + 6px);right:12px;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - var(--h-top,48px) - 18px);display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-3);box-shadow:var(--sh-3);z-index:72;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s .16s}
.nt-panel.open{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
.nt-panel .nt-h{display:flex;align-items:center;gap:8px;padding:10px 10px 8px 14px;border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap}
.nt-panel .nt-h h4{margin:0;font-size:var(--fs-md);font-weight:700}.nt-panel .nt-h .sp{flex:1}
.nt-panel .nt-h .ct{font:600 var(--fs-xs) var(--mono);color:var(--acc)}
.nt-panel .nt-seg{display:inline-flex;border:1px solid var(--line2);border-radius:var(--r-2);overflow:hidden}
.nt-panel .nt-seg button{border:0;background:transparent;color:var(--tx2);font:var(--fs-sm) var(--sans);padding:4px 10px;cursor:pointer}
.nt-panel .nt-seg button+button{border-left:1px solid var(--line2)}
.nt-panel .nt-seg button.on{color:var(--acc);background:var(--accbg);font-weight:600}
.nt-panel .nt-b{flex:1;min-height:0;overflow:auto}
.nt-list{list-style:none;margin:0;padding:0}
.nt-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:9px 12px 9px 16px;border-bottom:1px solid var(--line)}
.nt-item::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--line2)}
.nt-item.sev-warn::before{background:var(--accd)}.nt-item.sev-error::before{background:var(--acc)}.nt-item.sev-critical::before{background:var(--acc);box-shadow:0 0 0 1px var(--acc)}
.nt-item.st-resolved{opacity:.66}
.nt-item .nt-main{display:flex;flex-direction:column;gap:3px;text-align:left;border:0;background:transparent;color:var(--tx);padding:0;cursor:pointer;font:inherit;min-width:0}
.nt-item .nt-main:hover .nt-t,.nt-item .nt-main:focus-visible .nt-t{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.nt-item .nt-main:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.nt-item .nt-hd{display:flex;align-items:baseline;gap:6px;min-width:0}
.nt-item .nt-t{font-size:var(--fs-md);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.nt-item.st-unread .nt-t{font-weight:700}
.nt-item.st-unread .nt-hd::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;align-self:center}
.nt-item .nt-x{font:600 var(--fs-xs) var(--mono);color:var(--tx3);flex:none}
.nt-item .nt-m{font-size:var(--fs-sm);color:var(--tx2);line-height:1.45;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-item .nt-meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:var(--fs-xs);color:var(--tx3)}
.nt-item .nt-meta time{font-family:var(--mono)}
.nt-sev{display:inline-flex;align-items:center;font:600 9.5px/1.5 var(--sans);letter-spacing:.02em;padding:0 6px;border-radius:8px;border:1px solid var(--line2);color:var(--tx2);white-space:nowrap}
.nt-sev.warn{border-color:var(--accd);color:var(--acc)}.nt-sev.error{border-color:var(--acc);color:var(--acc);background:var(--accbg)}.nt-sev.critical{border-color:var(--acc);background:var(--acc);color:var(--accfg)}
.nt-item .nt-acts{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.nt-item .nt-acts .btn{height:24px;padding:0 8px;font-size:var(--fs-xs)}
.nt-panel .nt-f{display:flex;align-items:center;gap:8px;padding:7px 12px;border-top:1px solid var(--line);font-size:var(--fs-xs);color:var(--tx3);flex:none}
.nt-panel .nt-f .sp{flex:1}
.nt-live{display:inline-flex;align-items:center;gap:5px}.nt-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--tx3)}
.nt-live.on::before{background:var(--acc);box-shadow:0 0 0 3px var(--accbg)}
.nt-panel .empty-st{padding:28px 18px}
@media (max-width:768px){.nt-panel{left:8px;right:8px;width:auto}}
@media (prefers-reduced-motion:reduce){.nt-panel,.nt-panel.open{transition:opacity 60ms linear,visibility 0s;transform:none}.hd-bell.ring svg{animation:none}}

/* 계획 카드 — 에이전트가 실행 전에 보여 주는 여러 단계 작업. 사람이 고른 단계만 승인·실행 */
.plan-card{border:1px solid var(--line2);border-radius:var(--r-3);background:var(--surf);overflow:hidden;min-width:0}
.plan-card .pc-h{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.plan-card .pc-h b{font-size:var(--fs-md)}.plan-card .pc-h .sp{flex:1}
.plan-card .pc-goal{padding:8px 12px 0;font-size:var(--fs-sm);color:var(--tx2);overflow-wrap:anywhere}
.plan-card .pc-meta{padding:2px 12px 8px;font:var(--fs-xs) var(--mono);color:var(--tx3);overflow-wrap:anywhere}
.plan-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.plan-step{display:grid;grid-template-columns:22px 22px minmax(0,1fr) auto;gap:4px 8px;align-items:start;padding:8px 12px;border-bottom:1px solid var(--line)}
.plan-step:last-child{border-bottom:0}
.plan-step input[type=checkbox]{margin:2px 0 0;accent-color:var(--acc);width:15px;height:15px}
.plan-step .no{font:600 var(--fs-xs)/20px var(--mono);color:var(--tx3);text-align:center}
.plan-step .bd{min-width:0;display:flex;flex-direction:column;gap:2px}
.plan-step .bd b{font-size:var(--fs-sm)}
.plan-step .bd .ds{font-size:var(--fs-xs);color:var(--tx2);line-height:1.45;overflow-wrap:anywhere}
.plan-step .bd .im{font-size:var(--fs-xs);color:var(--tx3);line-height:1.45;overflow-wrap:anywhere}
.plan-step .bd .rs{font-size:var(--fs-xs);color:var(--tx);line-height:1.45;overflow-wrap:anywhere;margin-top:2px}
.plan-step .bd .rs a{cursor:pointer}
.plan-step .bd .er{font-size:var(--fs-xs);color:var(--acc);line-height:1.45;overflow-wrap:anywhere}
.plan-step .sd{display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.plan-step .sd .est{font:var(--fs-xs) var(--mono);color:var(--tx3)}
.plan-step.forbidden .bd b{text-decoration:line-through;color:var(--tx3)}
.plan-step.running{background:color-mix(in srgb,var(--accbg) 60%,transparent)}
.ap{display:inline-flex;align-items:center;font:600 9.5px/1.5 var(--sans);padding:0 6px;border-radius:8px;border:1px solid var(--line2);color:var(--tx3);white-space:nowrap}
.ap.ap-confirm{border-color:var(--accd);color:var(--acc)}
.ap.ap-typed_phrase{border-color:var(--acc);background:var(--accbg);color:var(--acc)}
.ap.ap-forbidden{border-style:dashed;color:var(--tx3);text-decoration:line-through}
.plan-card .pc-f{display:flex;align-items:center;gap:8px;padding:9px 12px;border-top:1px solid var(--line);background:var(--surf2);flex-wrap:wrap}
.plan-card .pc-f .sp{flex:1}.plan-card .pc-f .hint{font-size:var(--fs-xs);color:var(--tx3)}
@media (max-width:768px){.plan-step{grid-template-columns:22px minmax(0,1fr)}.plan-step .no{display:none}.plan-step .sd{grid-column:2;flex-direction:row;align-items:center;flex-wrap:wrap}}

/* 구조 diff — 형상 판 · 기준선 · 환경 비교 */
.dfv{display:flex;flex-direction:column;gap:8px;min-width:0}
.dfv .dfv-sum{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:var(--fs-sm)}
.dfv .dfv-sum b{font-weight:600}
.dfv .dfv-cols{display:flex;gap:4px 10px;flex-wrap:wrap;font:var(--fs-xs) var(--mono);color:var(--tx2)}
.dfv .dfv-cols span b{font-family:var(--sans);font-weight:600;color:var(--tx3);margin-right:4px}
.dfv-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-xs)}
.dfv-tbl th{text-align:left;font-weight:600;color:var(--tx3);padding:4px 6px;border-bottom:1px solid var(--line);background:var(--th)}
.dfv-tbl td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
.dfv-tbl td.p{font-family:var(--mono);color:var(--tx)}
.dfv-tbl td.v{font-family:var(--mono);color:var(--tx2);max-width:280px}
.dfv-op{display:inline-block;min-width:18px;text-align:center;font:700 11px/16px var(--mono);border-radius:4px;border:1px solid var(--line2);color:var(--tx2)}
.dfv-op.add{border-color:var(--acc);color:var(--acc);background:var(--accbg)}
.dfv-op.remove{border-style:dashed;color:var(--tx3);text-decoration:line-through}
.dfv-op.change{border-color:var(--accd);color:var(--acc)}
.dfv pre.code{max-height:340px}

/* ═════ §F 폼 부품 (2026-10-21) — 체크박스 · 라디오 · 셀렉트 · 날짜 선택. 동작은 ds.js(DS.check · DS.select · DS.date · DS.forms).
   모든 체크박스·라디오는 CSS 만으로 바뀐다(네이티브 input 그대로 — .checked · change · Space · Playwright check() 유지). 빼려면 .no-ds.
   :root 를 붙여 화면 시트(.plan-step input 등)보다 한 단계 위에 둔다. display 는 건드리지 않는다([hidden]·display:none 존중). */
:root input[type=checkbox]:not(.no-ds),:root input[type=radio]:not(.no-ds){-webkit-appearance:none;appearance:none;position:relative;flex:none;box-sizing:border-box;width:16px;height:16px;margin:0;vertical-align:-3px;border:1.5px solid var(--tx3);border-radius:4px;background:var(--bg);color:var(--accfg);cursor:pointer;transition:background-color var(--t-fast),border-color var(--t-fast),box-shadow var(--t-fast)}
:root input[type=radio]:not(.no-ds){border-radius:50%}
:root input[type=checkbox]:not(.no-ds)::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:4px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translate(-50%,-70%) rotate(-45deg) scale(0);transition:transform var(--t-fast) var(--ease-out,ease)}
:root input[type=radio]:not(.no-ds)::before{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:50%;background:var(--acc);transform:translate(-50%,-50%) scale(0);transition:transform var(--t-fast) var(--ease-out,ease)}
:root input[type=checkbox]:not(.no-ds):hover:not(:disabled),:root input[type=radio]:not(.no-ds):hover:not(:disabled){border-color:var(--tx2)}
:root input[type=checkbox]:not(.no-ds):checked,:root input[type=checkbox]:not(.no-ds):indeterminate{background:var(--acc);border-color:var(--acc)}
:root input[type=checkbox]:not(.no-ds):checked:hover:not(:disabled),:root input[type=checkbox]:not(.no-ds):indeterminate:hover:not(:disabled){background:var(--acc2);border-color:var(--acc2)}
:root input[type=checkbox]:not(.no-ds):checked::before{transform:translate(-50%,-70%) rotate(-45deg) scale(1)}
:root input[type=checkbox]:not(.no-ds):indeterminate::before{width:8px;height:0;border-left:0;transform:translate(-50%,-50%) scale(1)}
:root input[type=radio]:not(.no-ds):checked{border-color:var(--acc)}:root input[type=radio]:not(.no-ds):checked::before{transform:translate(-50%,-50%) scale(1)}
:root input[type=checkbox]:not(.no-ds):focus-visible,:root input[type=radio]:not(.no-ds):focus-visible{outline:2px solid var(--acc);outline-offset:2px}
:root input[type=checkbox]:not(.no-ds):disabled,:root input[type=radio]:not(.no-ds):disabled{opacity:.45;cursor:not-allowed}
:root input[type=checkbox]:not(.no-ds)[aria-invalid=true],:root input[type=radio]:not(.no-ds)[aria-invalid=true],:root .ds-check.err{border-color:var(--err);box-shadow:0 0 0 2px color-mix(in srgb,var(--err) 22%,transparent)}
/* 라벨 줄 · 묶음 — <label class="ds-cl"><input type=checkbox> 글자</label> · <fieldset class="ds-checks" role="group"><legend>…</legend>…</fieldset> */
.ds-cl{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12px;color:var(--tx);user-select:none;line-height:1.35}.ds-cl small{display:block;color:var(--tx3);font-size:11px}
.ds-cl:has(input:disabled){color:var(--tx3);cursor:not-allowed}
.ds-checks{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;border:0;min-width:0}.ds-checks.row{flex-direction:row;flex-wrap:wrap;gap:7px 16px}
.ds-checks legend{padding:0;margin-bottom:6px;font-size:var(--fs-xs);color:var(--tx3);letter-spacing:.02em}
.ds-checks.err .ds-cl{color:var(--err)}.ds-checks .ds-msg,.ds-msg{font-size:11px;color:var(--err)}
/* 셀렉트 — 네이티브 select 가 그대로 트리거(모양만), 펼친 목록은 .ds-sel-list(ds.js). 화면의 .seg select · .inp 테두리 규칙은 그대로 쓴다 */
:root select.ds-select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:24px;text-overflow:ellipsis;background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),linear-gradient(135deg,var(--tx3) 50%,transparent 50%);background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%;background-size:5px 5px;background-repeat:no-repeat}
:root select.ds-select:has(+ .cr){background-image:none;padding-right:20px}
:root select.ds-select.open{border-color:var(--acc);background-image:linear-gradient(135deg,transparent 50%,var(--acc) 50%),linear-gradient(45deg,var(--acc) 50%,transparent 50%);background-position:calc(100% - 13px) 46%,calc(100% - 8px) 46%}
:root select.ds-select:not(:disabled):hover{border-color:var(--tx3)}:root select.ds-select.open:hover{border-color:var(--acc)}
:root select.ds-select:focus-visible{outline:2px solid color-mix(in srgb,var(--acc) 60%,transparent);outline-offset:1px}
:root .seg select.ds-select:focus-visible{outline:0}:root .seg:has(> select.ds-select:focus-visible),:root .seg:has(> select.ds-select.open){border-color:var(--acc)}
:root select.ds-select:disabled{opacity:.55;cursor:not-allowed}
:root select.ds-select[aria-invalid=true],:root select.ds-select.err{border-color:var(--err)}:root .seg:has(> select.ds-select[aria-invalid=true]){border-color:var(--err)}
.ds-sel-list{position:fixed;z-index:500;box-sizing:border-box;min-width:120px;max-width:min(480px,calc(100vw - 12px));overflow:auto;overscroll-behavior:contain;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-2);box-shadow:var(--sh-2);padding:4px;font:var(--fs-sm) var(--mono);color:var(--tx)}
.ds-sel-list .it{position:relative;padding:5px 10px 5px 24px;border-radius:var(--r-1);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.45}
.ds-sel-list .it.ind{padding-left:34px}
.ds-sel-list .it.cur{background:var(--surf2);box-shadow:inset 2px 0 0 var(--acc)}
.ds-sel-list .it[aria-selected=true]{color:var(--acc);font-weight:600}
.ds-sel-list .it[aria-selected=true]::before{content:'';position:absolute;left:9px;top:50%;width:7px;height:3.5px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-70%) rotate(-45deg)}
.ds-sel-list .it.ind[aria-selected=true]::before{left:19px}
.ds-sel-list .it[aria-disabled=true]{opacity:.45;cursor:not-allowed}.ds-sel-list .it.none{color:var(--tx3);cursor:default}
.ds-sel-list .og{padding:7px 10px 3px;font:600 var(--fs-xs)/1.3 var(--sans);color:var(--tx3);letter-spacing:.04em;cursor:default}.ds-sel-list .og:not(:first-child){border-top:1px solid var(--line);margin-top:4px}
/* 날짜 선택 — 글자 칸(.ds-date-in) + 달력 버튼, 판(.ds-dp) */
.ds-date{position:relative;display:inline-flex;align-items:center;min-width:132px;vertical-align:middle}.ds-date.time{min-width:170px}.ds-date.range{min-width:230px}
.fld>.ds-date{display:flex;width:100%}
.ds-date .ds-date-in{width:100%;min-width:0;padding-right:30px;font-variant-numeric:tabular-nums}
.ds-date.open .ds-date-in{border-color:var(--acc)}
.ds-date.err .ds-date-in,.ds-date .ds-date-in[aria-invalid=true]{border-color:var(--err);box-shadow:0 0 0 2px color-mix(in srgb,var(--err) 18%,transparent)}
.ds-date-btn{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:24px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:var(--r-1);background:transparent;color:var(--tx3);cursor:pointer}
.ds-date-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ds-date-btn:hover:not(:disabled),.ds-date.open .ds-date-btn{color:var(--acc);background:var(--accbg)}.ds-date-btn:focus-visible{outline:2px solid var(--acc);outline-offset:0}.ds-date-btn:disabled{opacity:.45;cursor:not-allowed}
:root .ds-date-native{position:absolute!important;left:0;bottom:0;width:1px!important;height:1px!important;min-width:0!important;max-width:1px!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden}
.ds-dp{position:fixed;z-index:500;box-sizing:border-box;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-3);box-shadow:var(--sh-3);color:var(--tx);font:var(--fs-sm)/1.3 var(--sans);overflow:auto;opacity:1;transform:none;transition:opacity var(--dur-med,200ms) var(--ease-out,ease),transform var(--dur-slow,280ms) var(--ease-out,ease)}
@starting-style{.ds-dp{opacity:0;transform:translateY(-4px) scale(.98)}}
.ds-dp .dp-body{display:flex;align-items:stretch}
.ds-dp .dp-pre{display:flex;flex-direction:column;gap:2px;padding:8px;border-right:1px solid var(--line);background:var(--surf2);min-width:128px;border-radius:var(--r-3) 0 0 var(--r-3)}
.ds-dp .dp-p{text-align:left;padding:6px 10px;border:0;border-radius:var(--r-2);background:transparent;color:var(--tx2);font:500 12px/1.3 var(--sans);cursor:pointer;white-space:nowrap}
.ds-dp .dp-p:hover{background:var(--surf3);color:var(--tx)}.ds-dp .dp-p.on{color:var(--acc);background:var(--accbg);box-shadow:inset 2px 0 0 var(--acc)}.ds-dp .dp-p:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ds-dp .dp-main{position:relative;padding:10px 12px 10px;min-width:0}
.ds-dp .dp-head{position:absolute;left:8px;right:8px;top:8px;display:flex;align-items:center;pointer-events:none}.ds-dp .dp-sp{flex:1}
.ds-dp .dp-nav{pointer-events:auto;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-2);background:transparent;color:var(--tx2);cursor:pointer}
.ds-dp .dp-nav svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ds-dp .dp-nav:hover{background:var(--surf2);color:var(--acc)}.ds-dp .dp-nav:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ds-dp .dp-months{display:flex;gap:20px}
.ds-dp .dp-cap{height:28px;display:flex;align-items:center;justify-content:center;font:600 13px var(--sans);letter-spacing:.02em;font-variant-numeric:tabular-nums;margin-bottom:4px}
.ds-dp .dp-grid{display:grid;grid-template-rows:auto;gap:2px 0}
.ds-dp .dp-wd,.ds-dp .dp-row{display:grid;grid-template-columns:repeat(7,34px)}
.ds-dp .dp-wd span{height:24px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--tx3)}.ds-dp .dp-wd span.we{color:color-mix(in srgb,var(--acc) 70%,var(--tx3))}
.ds-dp .dp-d{position:relative;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;outline:0;font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--tx)}
.ds-dp .dp-d span{position:relative;z-index:1;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color var(--t-fast),color var(--t-fast)}
.ds-dp .dp-d:hover span{background:var(--surf3)}
.ds-dp .dp-d.out{color:var(--tx3);opacity:.5}
.ds-dp .dp-d.today span{box-shadow:inset 0 0 0 1px var(--acc);color:var(--acc);font-weight:700}
.ds-dp .dp-d.inr::before,.ds-dp .dp-d.prev::before,.ds-dp .dp-d.start::before,.ds-dp .dp-d.end::before{content:'';position:absolute;top:2px;bottom:2px;left:0;right:0;background:var(--accbg)}
.ds-dp .dp-d.start::before{left:50%}.ds-dp .dp-d.end::before{right:50%}.ds-dp .dp-d.start.end::before{display:none}
.ds-dp .dp-d.prev::before{background:color-mix(in srgb,var(--accbg) 60%,transparent);border-top:1px dashed var(--accd);border-bottom:1px dashed var(--accd)}
.ds-dp .dp-row .dp-d.inr:first-child::before,.ds-dp .dp-row .dp-d.prev:first-child::before{border-top-left-radius:15px;border-bottom-left-radius:15px}
.ds-dp .dp-row .dp-d.inr:last-child::before,.ds-dp .dp-row .dp-d.prev:last-child::before{border-top-right-radius:15px;border-bottom-right-radius:15px}
.ds-dp .dp-d.out::before{display:none}
.ds-dp .dp-d.sel span,.ds-dp .dp-d.pend span{background:var(--acc);color:var(--accfg);font-weight:700}.ds-dp .dp-d.sel:hover span{background:var(--acc2)}
.ds-dp .dp-d.pend:not(.sel) span{background:color-mix(in srgb,var(--acc) 55%,transparent)}
.ds-dp .dp-d:focus-visible span{outline:2px solid var(--acc);outline-offset:1px}
.ds-dp .dp-d.dis{cursor:not-allowed;color:var(--tx3)}.ds-dp .dp-d.dis span{text-decoration:line-through;opacity:.5;background:transparent}
.ds-dp .dp-sum{display:flex;align-items:center;gap:8px;margin-top:8px;padding:7px 10px;border-radius:var(--r-2);background:var(--surf2);font:var(--fs-sm) var(--mono);color:var(--tx2)}.ds-dp .dp-sum b{color:var(--tx);font-weight:600}.ds-dp .dp-sum em{margin-left:auto;font-style:normal;color:var(--acc);font-family:var(--sans)}
.ds-dp .dp-time{display:flex;align-items:center;gap:6px;margin-top:8px}.ds-dp .dp-tl{font-size:var(--fs-xs);color:var(--tx3);letter-spacing:.04em;margin-right:4px}.ds-dp .dp-time .inp{width:44px;text-align:center}
.ds-dp .dp-foot{display:flex;align-items:center;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
@media (max-width:560px){.ds-dp .dp-body{flex-direction:column}.ds-dp .dp-pre{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);border-radius:var(--r-3) var(--r-3) 0 0}.ds-dp .dp-wd,.ds-dp .dp-row{grid-template-columns:repeat(7,minmax(30px,1fr))}}
@media (prefers-reduced-motion:reduce){.ds-dp{transition:none}@starting-style{.ds-dp{opacity:1;transform:none}}:root input[type=checkbox]::before,:root input[type=radio]::before,.ds-dp .dp-d span{transition:none}}

/* ═════ §L 레이아웃 계약 · 데이터 영역 (2026-10-21) — 화면 높이 100% 를 넘는 스크롤은 섹션 안에서만 생긴다.
   계약: 문서(html·body)와 화면(.screen)은 절대 스크롤하지 않는다. 머리·도구줄은 고정이고, 정해진 데이터 영역만 스크롤한다.
   지정 스크롤러(이것 말고는 세로 스크롤이 생기면 감사 audit-layout.mjs --assert 가 실패한다) — 정본 목록은 ds.js 의 DS.layout.SCROLLERS:
     .ds-scroll      유일한 데이터 스크롤러. flex:1 · min-height:0 · overflow:auto · overscroll contain. 넓은 표는 이 안에서 가로로 민다
     .ds-scroll-y    세로만(가로 넘침은 줄바꿈으로 막는다)
     .ds-box         섹션 안의 높이 제한 상자(max-height 는 쓰는 쪽) — 카드 안 표·로그처럼 한 묶음만 따로 스크롤
     [data-ds-scroll] [data-ds-strip]  모양은 바꾸지 않고 '지정 스크롤러/띠'라고만 표시(캔버스·트리처럼 자기 배치가 있는 부품)
     .ds-strip       도구줄·탭 띠의 가로 스크롤만 허용(세로 금지). .bar · .subtabs · .snav(좁을 때) 는 이미 이 역할
     호환 별칭: .list · .two>.stack · .two>.card(목록이 아닌 상세 칸) · .sidepanel .sp-b · .sheet .sh-b · .dlg .msg · textarea · pre.code(높이 제한 안)
   부품:
     .ds-page        한 페이지(iframe 쪽 단독 페이지 포함)를 뷰포트(100dvh)에 고정한다. 머리 flex:none + .ds-fill/.ds-scroll
     .ds-section     머리(.ds-section-h, 고정) + 본문(.ds-scroll). 섹션 자체는 넘치지 않는다(overflow:hidden, min-height:0)
     .ds-fill        스크롤하지 않고 남은 높이를 자식에게 넘기는 flex 칸(flex:1 · min-height:0 · column)
     .ds-col         목록+상세(.two)의 한 칸 — 높이를 채우고 안의 .list/.ds-scroll 이 스크롤한다
   여백(통일): 섹션 바깥 간격 --ds-gap(sp-3 12) · 섹션 안쪽 --ds-pad(sp-3 12 / 좌우 sp-4 16) · 행 높이 --ds-row(30) · 빽빽한 행 --ds-row-dense(26)
   상태(공용, DS.state 가 그린다): .ds-state.is-empty · .is-loading(뼈대 줄 .ds-skel) · .is-error(다시 시도) · .is-end(목록 끝)
   무한 스크롤(DS.feed): .ds-feed = .ds-scroll 안에 위·아래 여백(.ds-feed-pad) + 보이는 행만. 끝 감시 .ds-feed-sentinel */
:root{--ds-gap:var(--sp-3);--ds-pad-y:var(--sp-3);--ds-pad-x:var(--sp-4);--ds-row:30px;--ds-row-dense:26px}
.ds-page{height:100vh;height:100dvh;max-height:100dvh;overflow:hidden;display:flex;flex-direction:column;min-height:0}
.ds-page>*{flex:none}.ds-page>.ds-fill,.ds-page>.ds-scroll,.ds-page>.ds-section{flex:1 1 0}
.ds-fill{flex:1 1 0;min-height:0;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.ds-scroll{flex:1 1 0;min-height:0;min-width:0;overflow:auto;overscroll-behavior:contain}
.ds-scroll-y{flex:1 1 0;min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.ds-box{overflow:auto;min-height:0;min-width:0;overscroll-behavior:contain}
.ds-strip{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;min-width:0}.ds-strip::-webkit-scrollbar{display:none}
.ds-section{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;background:var(--surf);border:1px solid var(--line);border-radius:var(--r-3)}
.ds-section.flat{background:transparent;border:0;border-radius:0}
.ds-section>.ds-section-h{flex:none;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--ds-pad-x);border-bottom:1px solid var(--line);min-height:38px}
.ds-section>.ds-section-h h3{font-size:var(--fs-md);margin:0}.ds-section>.ds-section-h .sp{flex:1}
.ds-section>.ds-section-f{flex:none;display:flex;align-items:center;gap:var(--sp-2);padding:6px var(--ds-pad-x);border-top:1px solid var(--line);font:var(--fs-xs) var(--mono);color:var(--tx3)}
.ds-section>.ds-scroll>.table th{top:0}
.ds-col{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
/* 화면 계약 — 셸의 모든 화면(.screen)에 적용. 화면과 본문은 넘치지 않고, 높이를 데이터 영역에 넘긴다 */
:root .screen{overflow:hidden}
:root .screen>.screen-body{flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:var(--ds-gap)}
:root .screen>.screen-body>*{flex:none;min-height:0}
:root .screen>.screen-body>.two,:root .screen>.screen-body>.ds-fill,:root .screen>.screen-body>.ds-scroll,:root .screen>.screen-body>.ds-section,:root .screen>.screen-body>.ds-grow{flex:1 1 0;min-height:0}
:root .screen>.screen-body>.two{grid-template-rows:minmax(0,1fr);align-items:stretch}
:root .screen>.screen-body>.two>*{min-height:0;display:flex;flex-direction:column;overflow:hidden}
:root .screen>.screen-body>.two>.stack,:root .screen>.screen-body>.two>.ds-scroll,:root .screen>.screen-body>.two>.card:not(.lcard){overflow:auto;overscroll-behavior:contain}
:root .screen>.screen-body>.two>.card:not(.lcard){display:block}
.bar .hint,.bar .stat{white-space:nowrap}   /* 도구줄 글자는 한 줄 — 넘치면 도구줄이 가로로 민다(세로로 자라지 않는다) */
:root .screen>.screen-body>.two>.stack>*{flex:none}
:root .screen .two>*>.list,:root .screen .ds-col>.list{flex:1 1 0;min-height:0;max-height:none;overflow:auto}
/* §L2 채움 (2026-10-21 반응형) — 어떤 너비·높이에서도 화면 아래·옆에 빈 띠를 남기지 않는다. 감사 e2e/audit-fill.mjs(문턱과 이유는 그 파일 머리)
   1) 바닥 여유: 본문 아래에 에이전트 버튼(.ag-fab) 자리 96px 을 늘 비워 두던 것(--fab-safe)을 거두고, 같은 여유(--fab-end)를 데이터 스크롤러의 끝 안쪽에 둔다.
      평소에는 섹션·카드가 바닥까지 차고, 끝까지 내렸을 때만 마지막 행이 버튼 위로 올라온다
   2) 상세 칸(.two>.stack): 데이터 영역(.ds-scroll·.ds-section)이 있으면 그것이, 없으면 첫 카드가 남은 높이를 채운다
   3) .ds-grow-card: 흐름 열 안에서 남은 높이를 채우는 카드 — 안의 표 상자(.ds-box)가 늘어나며 스크롤한다(최소 --ds-grow-min) */
:root{--fab-end:56px;--ds-grow-min:220px}
:root .screen>.screen-body{padding-bottom:var(--sp-3)}
:root [data-ds-end]{padding-bottom:var(--fab-end)!important}   /* ds.js 가 넘쳐 스크롤하는 데이터 영역에만 붙인다 */
:root .screen>.screen-body>.two>.stack>:is(.ds-scroll,.ds-section):last-child,:root .screen>.screen-body>.two>.stack:not(:has(>.ds-scroll,>.ds-section))>.card:first-child{flex:1 0 auto}
.ds-grow-card{display:flex;flex-direction:column;flex:1 1 0;min-height:var(--ds-grow-min)}
.ds-grow-card>.ds-box{flex:1 1 0;max-height:none!important}
@media (max-width:1023px){
  /* 한 칸이 되면 목록·상세가 높이를 나눠 갖는다(목록 2 : 상세 3). .two.pane 은 한쪽만 보이므로 그 칸이 전부 */
  :root .screen>.screen-body>.two{display:flex;flex-direction:column}
  :root .screen>.screen-body>.two>*{flex:3 1 0}
  :root .screen>.screen-body>.two>:first-child{flex:2 1 0}
  :root .screen>.screen-body>.two>.two-back{flex:none}
}
/* 공용 상태 */
.ds-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:var(--sp-5) var(--sp-4);color:var(--tx3);text-align:center;font-size:var(--fs-sm);line-height:1.6}
.ds-state b{color:var(--tx2);font-size:var(--fs-md);font-weight:600}
.ds-state svg{width:22px;height:22px;stroke:var(--tx3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ds-state.is-error b{color:var(--err)}.ds-state.is-error svg{stroke:var(--err)}
.ds-state.is-end{flex-direction:row;padding:var(--sp-2);font:var(--fs-xs) var(--mono);gap:var(--sp-2)}
.ds-state.is-end::before,.ds-state.is-end::after{content:'';flex:1;max-width:80px;border-top:1px solid var(--line)}
.ds-state .acts{display:flex;gap:var(--sp-2);margin-top:4px}
.ds-state.inline{flex-direction:row;padding:var(--sp-2) var(--sp-3);justify-content:flex-start}
.ds-skel{display:flex;flex-direction:column;gap:8px;padding:var(--sp-3) var(--ds-pad-x);width:100%}
.ds-skel i{display:block;height:10px;border-radius:5px;background:linear-gradient(90deg,var(--surf3) 0%,var(--surf2) 50%,var(--surf3) 100%);background-size:200% 100%;animation:ag-shim 1.3s linear infinite}
.ds-skel i:nth-child(3n+2){width:84%}.ds-skel i:nth-child(3n){width:62%}
/* 무한 스크롤 · 창 렌더 */
.ds-feed{position:relative;min-width:0}
.ds-feed-pad{display:block;pointer-events:none}
tr.ds-feed-pad>td{padding:0!important;border:0!important;height:inherit}
.ds-feed-sentinel{height:1px}
.ds-feed-row{min-height:var(--ds-row)}
.ds-feed-meta{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding:2px var(--sp-2);font:var(--fs-xs) var(--mono);color:var(--tx3);pointer-events:none}
@media (prefers-reduced-motion:reduce){.ds-skel i{animation:none}}
/* 머리 설명 → 툴팁(ds.js headerTips): 제목 뒤 작은 i 표시. 설명 글은 화면에 두지 않고 툴팁으로 (2026-10-21 사용자) */
.ds-tipped{cursor:help}
.ds-info{display:inline-flex;align-items:center;justify-content:center;flex:none;width:13px;height:13px;margin-left:5px;border-radius:50%;border:1px solid var(--line2);color:var(--tx3);font:600 9px/1 var(--sans);vertical-align:middle}
.ds-info::before{content:"i"}
.ds-tipped:hover>.ds-info{border-color:var(--acc);color:var(--acc)}
/* 카드 = 머리 · 내용 · 바닥 (2026-10-21 사용자). 머리(.card-h)는 위에 고정: 아이콘 · 이름 · 상태 배지 · 설명 툴팁.
   내용(.card-b)은 남는 높이를 채우고 넘치면 그 안에서 스크롤. 바닥(.card-f)은 아래에 고정: 스위치 · 버튼 같은 동작 부품만.
   격자 안 카드는 높이가 같아져 바닥 줄이 한 높이에 선다. 옛 .card.col + .hd/.acts 를 대신한다 */
.card.hcf{display:flex;flex-direction:column;min-width:0;min-height:0;padding:0;overflow:hidden}
.card.hcf>.card-h{flex:none;display:flex;align-items:center;gap:var(--sp-2);min-height:40px;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line)}
.card.hcf>.card-h h3,.card.hcf>.card-h b{margin:0;font-size:var(--fs-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card.hcf>.card-h .faint{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.card.hcf>.card-h svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8}
.card.hcf>.card-h .sp{flex:1 1 0}
.card.hcf>.card-b{flex:1 1 auto;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3)}
.card.hcf>.card-f{flex:none;margin-top:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line);background:var(--surf2)}
.card.hcf>.card-f .sp{flex:1 1 0}
.grid>.card.hcf{height:100%}

/* ═════ §DX Brain > Dictionary — 사전 화면(app/dict.js · app/dict_api.py, 2026-10-21) 전용. 다른 화면 규칙은 여기 두지 않는다 ═════
   틀: #s-dict > .screen-body.dx-body > [.dx-fbar 한 줄 거르기(가로 띠)] + [.dx-two = 목록 .ds-section | 상세 .ds-section]. 스크롤은 #dx-scroll(.ds-scroll) · #dx-db(.ds-scroll-y) 둘뿐.
   선택은 아웃라인(레드), 분류 배지는 중립(.badge), 상태만 .pill ok/warn/err. 1023px 이하는 위아래(목록 2 : 상세 3), 고른 것이 없으면 상세를 숨긴다 */
/* Brain 이 빌려 쓰는 관리 콘솔 판(#ap-dict) 안에서는 판 높이를 그대로 채운다 — 셸의 .adm-frame>.screen 고정 높이(100vh 계산)는 #adm-main 보다 커서 판이 스크롤했다 */
#s-admin #ap-dict.on{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#s-admin #ap-dict>#s-dict{height:auto!important;flex:1 1 0;min-height:0;border:0;border-radius:0}
#s-dict>.screen-body.dx-body{padding:var(--sp-3) var(--sp-4);gap:var(--ds-gap)}
#s-dict .dx-fbar{flex:none;display:flex;align-items:center;gap:var(--sp-2);min-height:34px;padding:2px 1px}
#s-dict .dx-fbar>*{flex:none}
#s-dict .dx-fbar .dx-q{width:260px;min-width:150px}
#s-dict .dx-fbar select{width:auto;min-width:0;max-width:230px}
#s-dict .dx-fbar .sp{flex:1 1 0;min-width:var(--sp-2)}
#s-dict .dx-fbar .btn svg,#s-dict .dx-det .btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#s-dict .dx-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,440px);grid-template-rows:minmax(0,1fr);gap:var(--ds-gap);flex:1 1 0;min-height:0;min-width:0;overflow:hidden}
#s-dict .dx-two>.ds-section{min-height:0;min-width:0}
#s-dict .dx-t{width:100%}
#s-dict .dx-t tr[data-k]{cursor:pointer}
#s-dict .dx-t tr[data-k]:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
#s-dict .dx-t tr.sel{outline:1px solid var(--acc);outline-offset:-1px}
#s-dict .dx-t tr.sel>td:first-child{box-shadow:inset 2px 0 0 var(--acc)}
#s-dict .dx-t td,#s-dict .dx-t th{white-space:nowrap}
#s-dict .dx-t td{max-width:300px;overflow:hidden;text-overflow:ellipsis}
#s-dict .dx-ell{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-dict .dx-dim{color:var(--tx3);border-style:dashed}
#s-dict .dx-det .ds-section-h h3{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:var(--mono)}
#s-dict .dx-ko{font-family:var(--sans)}
#s-dict .dx-db{padding:0 var(--ds-pad-x) var(--sp-3)}
#s-dict .dx-sec{padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
#s-dict .dx-sec:last-child{border-bottom:0}
#s-dict .dx-sec h4{margin:0 0 6px;font:600 var(--fs-xs) var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--tx3)}
#s-dict details.dx-sec>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
#s-dict details.dx-sec>summary::-webkit-details-marker{display:none}
#s-dict details.dx-sec>summary::before{content:'';width:6px;height:6px;border-right:1.5px solid var(--tx3);border-bottom:1.5px solid var(--tx3);transform:rotate(-45deg);transition:transform .15s;flex:none}
#s-dict details.dx-sec[open]>summary::before{transform:rotate(45deg)}
#s-dict details.dx-sec>summary h4{margin:0;text-transform:none;letter-spacing:0;font-size:var(--fs-sm);color:var(--tx2)}
#s-dict .dx-kv{display:grid;grid-template-columns:minmax(96px,128px) minmax(0,1fr);gap:4px var(--sp-3);margin:0;font-size:var(--fs-sm)}
#s-dict .dx-kv dt{color:var(--tx3);white-space:nowrap}
#s-dict .dx-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
#s-dict .dx-p{margin:4px 0;font-size:var(--fs-sm);line-height:1.6;overflow-wrap:anywhere}
#s-dict .dx-p code{font:var(--fs-xs) var(--mono);padding:0 3px;border:1px solid var(--line);border-radius:var(--r-1)}
#s-dict .dx-warn{color:var(--warn)}
#s-dict .dx-block{color:var(--err)}
#s-dict .dx-chips{display:flex;flex-wrap:wrap;gap:4px}
#s-dict .dx-acts{display:flex;align-items:center;gap:var(--sp-2);margin-top:var(--sp-2);flex-wrap:wrap}
#s-dict .dx-acts .sp{flex:1 1 0}
#s-dict .dx-box{max-height:280px;border:1px solid var(--line);border-radius:var(--r-2);margin-top:4px}
#s-dict .dx-box .table td{max-width:220px;overflow-wrap:anywhere;white-space:normal}
#s-dict .dx-a{color:var(--acc);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
#s-dict .dx-a svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
#s-dict .dx-pl{margin:0 0 var(--sp-2)}
#s-dict .dx-plh{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:var(--fs-sm)}
#s-dict .dx-tl{display:flex;flex-direction:column;gap:2px;margin-top:4px}
#s-dict .dx-tr{display:flex;align-items:center;gap:2px;font-size:var(--fs-sm)}
#s-dict .dx-tr .m{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-dict .dx-tr .btn.ico{width:24px;height:24px;padding:0}
#s-dict .dx-form{display:flex;flex-direction:column;gap:var(--sp-2)}
#s-dict .dx-fl{display:grid;grid-template-columns:minmax(96px,112px) minmax(0,1fr);align-items:center;gap:var(--sp-2);font-size:var(--fs-sm)}
#s-dict .dx-fl>span{color:var(--tx3)}
#s-dict .dx-fl[hidden]{display:none}
#s-dict .dx-fl textarea{resize:vertical;min-height:60px;max-height:200px}
#s-dict .dx-chk:empty{display:none}
@media (max-width:1023px){
  #s-dict .dx-two{display:flex;flex-direction:column}
  #s-dict .dx-two>.dx-list{flex:2 1 0}
  #s-dict .dx-two>.dx-det{flex:3 1 0}
  #s-dict .dx-two:not(.has-sel)>.dx-det{display:none}
}
@media (max-width:640px){
  #s-dict>.screen-body.dx-body{padding:var(--sp-2)}
  #s-dict .dx-fbar .dx-q{width:170px}
  #s-dict .dx-kv,#s-dict .dx-fl{grid-template-columns:minmax(80px,96px) minmax(0,1fr)}
}

/* ═════ §AU 인증·권한 (2026-10-21, app/auth.js) — 머리줄 사용자 칩 · 계정 메뉴 · 흉내 띠 · 권한 숨김 · Users · Access 편집기 ═════ */
[data-auth-hide]{display:none!important}
.au-chip-w{position:relative;flex:none}
.au-chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 3px;border:1px solid var(--line2);border-radius:15px;background:var(--surf2);color:var(--tx2);font-size:12px;cursor:pointer;max-width:180px}
.au-chip:hover{border-color:var(--accd);color:var(--tx)}
.au-chip[aria-expanded="true"]{border-color:var(--acc);color:var(--acc)}
.au-chip .av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accbg);color:var(--acc);font:600 10px var(--mono);flex:none}
.au-chip .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.au-chip.imp{border-color:var(--warn);color:var(--warn)}
@media (max-width:1100px){.au-chip .nm{display:none}.au-chip{padding:0 3px}}
.au-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:240px;max-width:min(320px,calc(100vw - 16px));background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-2);box-shadow:var(--sh-2);padding:4px;z-index:70;display:flex;flex-direction:column}
.au-menu[hidden]{display:none}
.au-mh{display:flex;flex-direction:column;gap:2px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:var(--fs-sm)}
.au-mh .mono{font:var(--fs-xs) var(--mono);color:var(--tx2)}.au-mh .faint{font-size:var(--fs-xs);color:var(--tx3)}.au-mh .badge{align-self:flex-start;margin-top:4px}
.au-mi{text-align:left;padding:7px 10px;border-radius:var(--r-1);font-size:12.5px;color:var(--tx2);background:transparent;border:0;cursor:pointer}
.au-mi:hover,.au-mi:focus-visible{background:var(--surf2);color:var(--tx);outline:0}
.au-imp{display:flex;align-items:center;gap:8px;flex:none;min-height:32px;padding:3px 16px;background:var(--warnbg);color:var(--tx);border-bottom:1px solid var(--warn);font-size:var(--fs-sm);z-index:60}
.au-imp .dot{width:8px;height:8px;border-radius:50%;background:var(--warn);flex:none}
.au-imp .tx{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.au-imp .mono{font-family:var(--mono);color:var(--tx2)}.au-imp .sp{flex:1}
.au-mx td,.au-mx th{text-align:center}.au-mx td:first-child,.au-mx th:first-child{text-align:left}
.au-ovg{margin-bottom:8px}.au-ovg .eyebrow{margin:6px 0 2px}
.au-tri{display:flex;gap:10px;justify-content:flex-end}.au-tri label{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--tx2);cursor:pointer}
.au-eff{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow:auto}.au-effrow .chips{margin-top:3px}

/* ═════ §AU2 인증·권한 이어서 (2026-10-21, app/auth.js) — 칩 메뉴 안 Settings · 아바타 · 내 정보 · 사용자 목록 필터·정렬·대량 · 편집 시트 구획 ═════ */
.au-chip .av,.au-mh .av,.au-urow .av,.au-pf-id .av{display:inline-grid;place-items:center;border-radius:50%;background:var(--accbg);color:var(--acc);font:600 10px var(--mono);flex:none;overflow:hidden}
.av.img{background:var(--surf3)}.av.img img{width:100%;height:100%;object-fit:cover;display:block}
.au-chip .av{width:24px;height:24px}.av.sm{width:26px;height:26px}.av.lg{width:36px;height:36px;font-size:12px}.av.xl{width:56px;height:56px;font-size:16px}
.au-mh{flex-direction:row;align-items:center;gap:10px}.au-mh-t{display:flex;flex-direction:column;gap:2px;min-width:0}.au-mh-t b,.au-mh-t .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-mi{display:flex;align-items:center;gap:8px;text-decoration:none}.au-mi svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
a.au-mi:hover{text-decoration:none}.au-mi.on{color:var(--acc);background:var(--accbg)}
.au-sep{height:1px;background:var(--line);margin:4px 2px}
.au-pf-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--sp-3)}.au-pf-id{display:flex;align-items:center;gap:12px;min-width:0}
.au-pf-nm{display:flex;flex-direction:column;gap:3px;min-width:0}.au-pf-nm b{font-size:var(--fs-lg)}.au-pf-nm .mono{font:var(--fs-sm) var(--mono);color:var(--tx2)}
.au-pf-top .sp{flex:1}.au-sw{display:flex;gap:4px;flex-wrap:wrap}
.au-swc{width:18px;height:18px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}.au-swc.on,.au-swc:hover{border-color:var(--tx)}
.au-urow{display:flex;align-items:center;gap:8px;min-width:0}.au-urow>div{min-width:0}
.au-ck{width:28px}#us-tbl .au-sort{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;white-space:nowrap}#us-tbl .au-sort.on{color:var(--acc)}
.au-filters{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:var(--sp-3) 0 var(--sp-2)}.au-filters .inp.q{width:240px;max-width:100%}.au-filters .au-f{width:auto;min-width:120px}
.au-bulk[hidden]{display:none}.au-bulk .grow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.au-top{margin-bottom:var(--sp-2)}.au-top .card{min-width:0}
.au-jump{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:var(--sp-2);position:sticky;top:-12px;background:var(--surf);padding:4px 0;z-index:2}
.au-sec{scroll-margin-top:40px}.au-pm{margin-top:var(--sp-2)}
@media (max-width:800px){.au-filters .au-f{min-width:0;flex:1 1 40%}.au-pf-top .sp{display:none}}
.apptop .au-chip.on{color:var(--acc);border-color:var(--acc);background:var(--accbg);position:relative}
.apptop .au-chip.on::after{content:'';position:absolute;left:-1px;right:-1px;bottom:-9px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--acc) 22%,var(--acc) 78%,transparent);opacity:.9}
/* §AU3 출처 배지(2026-10-21): 칸 이름 옆 작은 표시 — 사람이 고침은 주조색 윤곽, 자동 원천은 중립 */
.au-src{display:inline-flex;align-items:center;font:600 9px/1.4 var(--mono);padding:0 5px;margin-left:6px;border-radius:var(--r-1);border:1px solid var(--line2);color:var(--tx3);text-transform:uppercase;letter-spacing:.04em;vertical-align:1px;cursor:help}
.au-src.s-manual{border-color:var(--accd);color:var(--acc)}
#us-dir-tbl tr.au-dd>td{background:var(--surf2)}#us-dir-tbl .au-dx{padding:0 6px;min-width:22px}
.au-dir{margin-bottom:var(--sp-2)}.au-dir .ch{flex-wrap:wrap}

/* ───── §T 탭형 메뉴 너비 표준 (2026-10-21 사용자: 헤더의 탭형 메뉴 너비 표준화) ─────
   1차 메뉴(.apptop>nav>a): 글자 길이와 상관없이 같은 칸 --tab-w(좁으면 --tab-w-sm, 아이콘만이면 36). 글자·아이콘·배지는 칸 가운데.
   보기 전환(.seg>button · .subtabs button): 최소 --seg-tab-w, 가운데 정렬. 아이콘만 있는 버튼은 제외. 더 긴 이름은 그만큼 넓어진다(잘리지 않음). */
:root{--tab-w:88px;--tab-w-sm:76px;--seg-tab-w:76px}
.apptop>nav>a{min-width:var(--tab-w);justify-content:center;box-sizing:border-box}
@media (max-width:1279px){.apptop>nav>a{min-width:var(--tab-w-sm)}}
@media (max-width:1023px){.apptop>nav>a{min-width:36px}}
.seg>button:not(.btn):not(:has(>svg:only-child)),.subtabs button:not(:has(>svg:only-child)){min-width:var(--seg-tab-w);display:inline-flex;align-items:center;justify-content:center;text-align:center;box-sizing:border-box}

/* ───── §S 로딩 표시 가운데 (2026-10-21 사용자: 모든 loading 스피너는 콘텐츠 가운데) ─────
   .loading 은 들어 있는 칸의 남은 자리를 채우고 그 가운데에 스피너 + 문구를 둔다. 작은 스피너(.spinner.sm)를 쓴 줄 안 표시(Testing… 등)는 줄 높이 그대로, 가운데 정렬만. */
.loading{justify-content:center;align-self:stretch;flex:1 1 auto;min-height:120px;width:100%;box-sizing:border-box;text-align:center}
.loading:has(>.spinner.sm){min-height:0;flex:none;padding:var(--sp-2) 0}
td>.loading,li>.loading{min-height:0;flex:none}
/* 상단 바: 로그인 사용자 배지는 화면 제목(설명 툴팁 아이콘) 바로 오른쪽 */
#s-admin .bar>.adm-who{flex:none;max-width:min(320px,32vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:2px}
@media (max-width:900px){#s-admin .bar>.adm-who{display:none}}
/* §AU4 Users 목록은 자기 스크롤러(#us-scroll)에서 무한 스크롤 — 판 스크롤러(#adm-main)의 DS.feed(감사 기록)와 섞이지 않게(2026-10-21) */
#s-admin .us-scroll{max-height:max(320px,calc(100vh - 300px));overflow:auto}
#adm-sheet .au-sec,#adm-sheet .au-jump,#adm-sheet #us-dir-tbl,#adm-sheet .au-pm{flex:none}   /* 시트 본문이 flex 열이어도 구획이 줄어들어 겹치지 않게 */
#adm-sheet .sh-b>.sh-sec.au-sec,#adm-sheet .sh-b>.au-jump{flex:0 0 auto!important;height:auto!important}

/* ───── §MD 에이전트 답 글 마크다운 (2026-10-21) — shell.html mdHtml ───── */
.ag-msg .ag-ans.md{white-space:normal;line-height:1.6;font-size:var(--fs-md,13.5px);color:var(--tx);overflow-wrap:anywhere}
.ag-ans.md>*:first-child{margin-top:0}.ag-ans.md>*:last-child{margin-bottom:0}
.ag-ans.md p{margin:0 0 8px}
.ag-ans.md h3,.ag-ans.md h4,.ag-ans.md h5,.ag-ans.md h6{margin:12px 0 6px;font-weight:600;line-height:1.35;color:var(--tx)}
.ag-ans.md h3{font-size:15px}.ag-ans.md h4{font-size:14px}.ag-ans.md h5,.ag-ans.md h6{font-size:13px}
.ag-ans.md ul,.ag-ans.md ol{margin:0 0 8px;padding-left:20px}.ag-ans.md li{margin:2px 0}.ag-ans.md li>ul{margin:2px 0 0}
.ag-ans.md code{font:12px var(--mono);background:var(--surf2);border:1px solid var(--line);border-radius:4px;padding:0 4px}
.ag-ans.md pre.code{margin:0 0 8px;padding:8px 10px;background:var(--surf2);border:1px solid var(--line);border-radius:var(--r-2);overflow:auto;max-height:320px}
.ag-ans.md pre.code code{border:0;background:none;padding:0;white-space:pre}
.ag-ans.md blockquote{margin:0 0 8px;padding:4px 10px;border-left:2px solid var(--line2);color:var(--tx2);background:var(--surf2);border-radius:0 var(--r-2) var(--r-2) 0}
.ag-ans.md hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.ag-ans.md a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.ag-ans.md .ag-tw{overflow:auto;margin:0 0 8px;border:1px solid var(--line);border-radius:var(--r-2)}
.ag-ans.md table{border-collapse:collapse;width:100%;font-size:12.5px}.ag-ans.md th,.ag-ans.md td{padding:5px 8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}.ag-ans.md th{background:var(--surf2);font-weight:600}.ag-ans.md tr:last-child td{border-bottom:0}
.ag-cref{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;margin:0 1px;border-radius:9px;border:1px solid var(--line2);background:var(--surf);color:var(--acc);font:600 10.5px/1 var(--mono);vertical-align:1px;cursor:pointer}
.ag-cref:hover,.ag-cref:focus-visible{border-color:var(--acc);background:var(--accbg)}
.ag-conf{display:inline-flex;margin:0 0 6px}

/* ===== §AGV 에이전트 답 도안(2026-10-21, app/agvis.js) — 캔버스 시각 언어: 원천 --src · 단계 --cal · 대상 --acc · 키 --key · 선 --e-*. 주조색 레드만, 선택은 아웃라인 ===== */
.agv-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.agv{min-width:0;border:1px solid var(--line2);border-radius:var(--r-2,8px);background:var(--surf);padding:8px 10px;display:flex;flex-direction:column;gap:6px;font:var(--fs-sm)/1.35 var(--sans);color:var(--tx)}
.agv-h{display:flex;align-items:baseline;gap:8px;min-width:0}.agv-h b{font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.agv-sub{color:var(--tx3);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.agv-sp{flex:1}
.agv-src{font-size:var(--fs-xs);color:var(--tx3);border:1px dashed var(--line2);border-radius:8px;padding:0 6px;flex:none;cursor:help}
.agv-faint{color:var(--tx3);font-size:var(--fs-xs)}.agv-mono{font-family:var(--mono);font-size:var(--fs-xs)}
.agv-foot{display:flex;flex-wrap:wrap;gap:6px}.agv-foot:empty{display:none}
.agv-pills,.agv-chips{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.agv-sep{width:1px;height:14px;background:var(--line2);margin:0 2px}
.agv-chip{font:var(--fs-xs)/1.5 var(--mono);border-radius:9px;padding:0 6px;border:1px solid var(--line2);color:var(--tx2);background:var(--surf2)}
.agv-chip.key,.agv-chip.axis{color:var(--key);background:var(--keybg);border-color:color-mix(in srgb,var(--key) 40%,transparent)}
.agv-chip.ok{color:var(--ok);background:var(--okbg);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.agv-chip.off{opacity:.7}
.agv-chip.par{color:var(--tx3);font-size:10px}
.agv-box{display:block;width:100%;text-align:left;font:var(--fs-xs)/1.3 var(--mono);border-radius:6px;padding:3px 6px;border:1px solid var(--line2);background:var(--surf2);color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;min-width:0}
button.agv-box:hover,button.agv-box:focus-visible{outline:2px solid var(--acc);outline-offset:-1px}
.agv-box.src{background:var(--srcbg);border-color:color-mix(in srgb,var(--src) 45%,transparent);color:var(--src)}
.agv-box.tgt{background:var(--accbg);border-color:var(--acc);color:var(--tx);font-weight:600}.agv-box.tgt.on{outline:2px solid var(--acc);outline-offset:1px;cursor:default}
.agv-box.def{background:var(--surf);}.agv-ln.draft .agv-box.def{border-style:dashed}.agv-box.eng{cursor:default;color:var(--tx3)}
.agv-ch{font:600 10px/1.4 var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--tx3);margin-bottom:2px}
/* 파이프라인 레인 */
.agv-lane{display:flex;align-items:center;gap:8px;min-width:0;border:1px solid var(--line);border-radius:6px;padding:5px 7px;background:var(--surf2)}
.agv-lane.on{border-color:var(--acc);box-shadow:inset 3px 0 0 var(--acc);background:var(--accbg)}
.agv-st{display:flex;flex-direction:column;align-items:flex-start;min-width:62px;border:0;background:none;padding:0;color:var(--tx);cursor:pointer;text-align:left;font:inherit}
.agv-st:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}.agv-st .agv-n{font:600 var(--fs-sm) var(--sans)}.agv-st .agv-t{font-size:var(--fs-xs);color:var(--tx3)}
.agv-lane.on .agv-st .agv-n{color:var(--acc)}
.agv-lb{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.agv-lb .agv-mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agv-fams{display:flex;flex-wrap:wrap;gap:3px}
.agv-fam{font:var(--fs-xs)/1.5 var(--mono);padding:0 5px;border-radius:4px;color:var(--src);background:var(--srcbg);border:1px solid color-mix(in srgb,var(--src) 35%,transparent)}
.agv-fam.on{outline:2px solid var(--acc);outline-offset:0;color:var(--tx)}
.agv-cnt{font:600 var(--fs-xs)/1.5 var(--mono);color:var(--acc);background:var(--accbg);border-radius:9px;padding:0 6px;flex:none}
.agv-arr{display:flex;align-items:center;gap:6px;padding:0 0 0 30px;min-height:16px;color:var(--tx3);font-size:var(--fs-xs)}
.agv-arr i{width:2px;height:14px;background:var(--e-copy);position:relative;flex:none}.agv-arr i::after{content:"";position:absolute;left:-3px;bottom:-3px;border:4px solid transparent;border-top-color:var(--e-copy);border-bottom:0}
.agv-arr span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.agv-eng{position:relative;border:1.5px dashed var(--e-br);border-radius:8px;padding:14px 6px 6px;display:flex;flex-direction:column;gap:0}
.agv-engl{position:absolute;top:-1px;left:8px;transform:translateY(-50%);background:var(--surf);padding:0 4px;font:600 10px var(--sans);color:var(--tx3);letter-spacing:.04em}
/* 정의 카드 */
.agv-cv{display:grid;grid-template-columns:minmax(0,1.1fr) 14px minmax(0,1fr) 14px minmax(0,1fr);align-items:center;gap:0}
.agv-col{display:flex;flex-direction:column;gap:3px;min-width:0}
.agv-wire{height:2px;background:var(--e-copy);position:relative}.agv-wire::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--e-copy);border-right:0}
.agv-step{display:flex;align-items:center;gap:4px;font:var(--fs-xs)/1.3 var(--mono);color:var(--cal);background:var(--calbg);border:1px solid color-mix(in srgb,var(--cal) 35%,transparent);border-radius:6px;padding:2px 5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.agv-step em{font-style:normal;color:var(--tx3)}
.agv-regs{display:flex;flex-direction:column;gap:2px}.agv-reg{display:flex;gap:6px;align-items:center;font-size:var(--fs-xs)}.agv-reg.off{opacity:.6}
.agv-ord{font:600 var(--fs-xs)/1.5 var(--mono);color:var(--tx2);min-width:28px;text-align:right;flex:none}
/* 계보 */
.agv-lg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:0 18px;align-items:center}
.agv-lc{display:flex;flex-direction:column;gap:4px;min-width:0;position:relative;z-index:1}.agv-lm{position:relative;z-index:1;min-width:0}
.agv-ln{min-width:0}.agv-tiny{font:10px/1.3 var(--mono);color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.agv-edges{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;z-index:0}.agv-edges path{fill:none;stroke:var(--e-copy);stroke-width:1.4}
/* 순서도 */
.agv-fl{list-style:none;margin:0;padding:0 0 0 4px;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--e-dim)}
.agv-fi{display:flex;align-items:center;gap:6px;min-width:0;position:relative;padding-left:8px}
.agv-fi::before{content:"";position:absolute;left:-6px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--surf);border:2px solid var(--e-copy)}
.agv-mod{flex:1;min-width:0;text-align:left;font:var(--fs-xs)/1.4 var(--mono);color:var(--tx);background:none;border:1px solid transparent;border-radius:5px;padding:1px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.agv-mod:hover,.agv-mod:focus-visible{border-color:var(--acc);outline:0}.agv-mod:not(.plain){text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:2px}
.agv-g{font:600 10px/1.5 var(--mono);border-radius:4px;padding:0 4px;flex:none;color:var(--tx3);border:1px solid var(--line2)}.agv-g.gA{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}.agv-g.gB{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.agv-more summary{cursor:pointer;font-size:var(--fs-xs);color:var(--tx2);padding:2px 0}.agv-more .agv-fl{margin-top:2px}
/* 식별자 */
.agv-vl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.agv-vc{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:var(--surf2);min-width:0;font-size:var(--fs-xs)}
.agv-vc b{font-size:var(--fs-xs)}.agv-vc .agv-faint{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.agv-vc.made{border-color:var(--acc);background:var(--accbg)}.agv-vc.used{border-color:color-mix(in srgb,var(--acc) 40%,var(--line))}
.agv-dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--e-dim);flex:none;display:inline-block}.agv-vc.made .agv-dot,.agv-dot.m{background:var(--acc);border-color:var(--acc)}
.agv-legend{display:flex;gap:12px;font-size:var(--fs-xs);color:var(--tx3);align-items:center}.agv-legend>span{display:inline-flex;gap:4px;align-items:center}
@media (max-width:520px){.agv-cv{grid-template-columns:minmax(0,1fr);gap:4px}.agv-wire{width:2px;height:10px;justify-self:center}.agv-wire::after{right:-3px;top:auto;bottom:-3px;border:4px solid transparent;border-top-color:var(--e-copy);border-bottom:0}.agv-vl{grid-template-columns:repeat(2,minmax(0,1fr))}.agv-lg{gap:0 12px}}
@media (prefers-reduced-motion:reduce){.agv *{transition:none!important;animation:none!important}}
/* ===== §AGV 끝 ===== */

/* ===== §DC 문서 통제(Document Control, 2026-10-21) — Brain > Knowledge > Document Control(doccontrol.js) · 독 근거 배지(.ag-ctl).
   토큰만. 색은 주조색 레드의 명도 + 중립(정본 = 레드 채움 바탕, 바뀜 = 레드 점선, 참고 = 중립 실선, 미검토 = 중립 점선, 반려·대체·제외 = 흐림).
   틀: 한 줄 거르기(.dc-fbar, 가로 띠) + [목록 .ds-section(머리 · 열 머리 · .ds-scroll 하나) | 상세 .sidepanel(.sp-b 하나 + 꼬리 .dc-foot)] — 화면은 스크롤하지 않는다 ===== */
#s-brain .br-pane[data-p="control"]{grid-template-columns:minmax(0,1fr) minmax(320px,400px);grid-template-rows:auto minmax(0,1fr)}
#s-brain .dc-fbar{grid-column:1/-1;display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:1px 0}
#s-brain .dc-fbar::-webkit-scrollbar{display:none}
#s-brain .dc-fbar>select{flex:none;width:auto;max-width:200px}
#s-brain .dc-fbar .dc-q{flex:0 1 240px;min-width:120px}
#s-brain .dc-fbar .sp{flex:1}
#s-brain .dc-fbar #dc-cnt{white-space:nowrap;font-size:var(--fs-xs)}
#s-brain .dc-chk{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-sm);color:var(--tx2);white-space:nowrap;cursor:pointer;flex:none}
#s-brain .dc-list{--dc-cols:24px 104px minmax(0,1fr) 78px 92px 92px}
#s-brain .dc-list>.ds-section-h .dc-sel{font:600 var(--fs-xs) var(--mono);color:var(--acc)}
#s-brain .dc-list>.ds-section-h .btn{flex:none}
#s-brain .dc-hd{flex:none;display:grid;grid-template-columns:var(--dc-cols);gap:8px;align-items:center;padding:5px var(--ds-pad-x);border-bottom:1px solid var(--line);background:var(--th,var(--surf2));font:600 var(--fs-xs) var(--sans);color:var(--tx2);min-width:0}
#s-brain .dc-hd>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#s-brain .dc-row{display:grid;grid-template-columns:var(--dc-cols);gap:8px;align-items:center;padding:6px var(--ds-pad-x);border-bottom:1px solid var(--line);cursor:pointer;min-width:0;font-size:var(--fs-sm);color:var(--tx);outline:none}
#s-brain .dc-row:hover{background:var(--surf2)}
#s-brain .dc-row:focus-visible{box-shadow:inset 0 0 0 2px var(--acc)}
#s-brain .dc-row.on{box-shadow:inset 2px 0 0 var(--acc);background:var(--surf2)}
#s-brain .dc-row.ck{background:var(--accbg)}
#s-brain .dc-row>span{min-width:0}
#s-brain .dc-row .bd b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-brain .dc-row .bd small{display:block;color:var(--tx3);font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#s-brain .dc-row .mono{font:var(--fs-xs) var(--mono);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-brain .dc-rows .ds-state{margin:var(--sp-3)}
.dc-st{display:inline-flex;align-items:center;font:600 10.5px/1.5 var(--sans);letter-spacing:.02em;padding:0 7px;border-radius:9px;border:1px solid var(--line2);color:var(--tx2);background:transparent;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.dc-st.canonical{border-color:var(--acc);color:var(--accfg);background:var(--acc)}
.dc-st.canonical_changed{border-color:var(--acc);border-style:dashed;color:var(--acc);background:var(--accbg)}
.dc-st.reference{border-color:var(--line2);color:var(--tx)}
.dc-st.unreviewed,.dc-st.under_review{border-style:dashed;color:var(--tx3)}
.dc-st.rejected{color:var(--tx3);text-decoration:line-through;border-color:var(--line)}
.dc-st.superseded,.dc-st.excluded{color:var(--tx3);border-color:var(--line);background:var(--surf2)}
.dc-st.sm{font-size:10px;padding:0 6px;margin-left:4px}
#s-brain .dc-side{--sp-w:100%;border:1px solid var(--line);border-radius:var(--r-3)}
#s-brain .dc-side .sp-h #dc-dp{flex:none;padding-right:8px}
#s-brain .dc-pad{padding:var(--ds-pad-y) var(--ds-pad-x);display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
#s-brain .dc-dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;font-size:var(--fs-sm);margin:0}
#s-brain .dc-dl dt{color:var(--tx3)}#s-brain .dc-dl dd{margin:0;overflow-wrap:anywhere}
#s-brain .dc-dl a,#s-brain .dc-pad a{color:var(--acc);cursor:pointer;text-decoration:none}#s-brain .dc-dl a:hover{text-decoration:underline}
#s-brain .dc-pre{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--fs-xs)/1.6 var(--mono);color:var(--tx2);background:var(--surf2);border:1px solid var(--line);border-radius:var(--r-2);padding:8px 10px}
#s-brain .dc-diff{border:1px solid var(--line);border-radius:var(--r-2);font-size:var(--fs-xs);line-height:1.55;overflow-wrap:anywhere;white-space:pre-wrap}
#s-brain .dc-diff>div{padding:0 8px}
#s-brain .dc-diff .add{background:var(--accbg);color:var(--tx)}
#s-brain .dc-diff .add::before{content:'';}
#s-brain .dc-diff .del{color:var(--tx3);text-decoration:line-through;background:var(--surf2)}
#s-brain .dc-diff .hunk{color:var(--tx3);border-top:1px dashed var(--line)}
#s-brain .dc-review{border:1px dashed var(--accd);border-radius:var(--r-2);padding:6px 10px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-sm)}
#s-brain .dc-warn{border-left:3px solid var(--acc);background:var(--accbg);padding:6px 10px;border-radius:var(--r-1);font-size:var(--fs-sm);line-height:1.5}
#s-brain .dc-th{display:flex;align-items:center;gap:4px;min-width:0}#s-brain .dc-th .sp{flex:1}#s-brain .dc-th .faint{font-size:var(--fs-xs);white-space:nowrap}
#s-brain .dc-tx{font-size:var(--fs-sm);color:var(--tx2);white-space:pre-wrap;overflow-wrap:anywhere}
#s-brain .dc-thread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
#s-brain .dc-thread li{border-left:2px solid var(--line2);padding:2px 0 2px 10px;font-size:var(--fs-sm)}
#s-brain .dc-thread li.k-decide{border-left-color:var(--acc)}#s-brain .dc-thread li.k-changed{border-left-color:var(--acc);border-left-style:dashed}
#s-brain .dc-none{font-size:var(--fs-sm)}
#s-brain .dc-cm{display:flex;gap:6px;align-items:flex-end}#s-brain .dc-cm textarea{flex:1;min-width:0;resize:vertical;min-height:52px;max-height:160px}
#s-brain .dc-foot{flex:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 60px 8px var(--ds-pad-x);border-top:1px solid var(--line);background:var(--surf);min-height:44px}
#s-brain .dc-foot .faint{font-size:var(--fs-xs)}
#s-brain .br-acts{display:flex;align-items:center;gap:6px;flex:none;min-width:0}#s-brain .br-acts:empty{display:none}
#s-brain .br-acts .seg button{white-space:nowrap}
#s-brain .dc-views .dc-n{font:600 10px var(--mono);color:var(--acc);margin-left:2px}
@media (max-width:1280px){#s-brain .dc-list{--dc-cols:24px 96px minmax(0,1fr) 64px 84px}#s-brain .dc-list .c5{display:none}#s-brain .br-acts .dc-views button{padding-left:8px;padding-right:8px}}
@media (max-width:1100px){#s-brain .br-pane[data-p="control"]{grid-template-columns:minmax(0,1fr) minmax(280px,330px)}#s-brain #dc-fx{display:none}}
@media (max-width:900px){#s-brain .dc-list{--dc-cols:24px 92px minmax(0,1fr)}#s-brain .dc-list .c3,#s-brain .dc-list .c4{display:none}#s-brain #dc-fk,#s-brain .dc-chk{display:none}
  #s-brain .br-acts .dc-views button{font-size:var(--fs-xs);padding-left:6px;padding-right:6px}}
@media (max-width:760px){#s-brain .br-pane[data-p="control"]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:600px){#s-brain .br-acts .dc-views button:not(.on){display:none}}
/* 독 근거 배지(shell.html msgHtml) */
.ag-cite .ag-ctl{font:600 10px/1.5 var(--sans);padding:0 6px;border-radius:8px;border:1px solid var(--line2);color:var(--tx3);flex:none}
.ag-cite .ag-ctl.canonical{border-color:var(--acc);background:var(--acc);color:var(--accfg)}
.ag-cite .ag-ctl.canonical_changed{border-color:var(--acc);border-style:dashed;color:var(--acc)}
.ag-cite .ag-ctl.reference{color:var(--tx2)}
.ag-cite .ag-ctl.under_review,.ag-cite .ag-ctl.und{border-style:dashed}
/* ===== §DC 끝 ===== */

/* ===== §AGD 독 배치·실시간 흐름(2026-10-21 사용자: 가운데 대칭 · 회색 테두리 없음 · 넉넉한 여백 · 입력 포커스 레드 윤곽 유지 · 흔적 패널의 처리 단계 나무) ===== */
:root{--ag-gut:var(--sp-5);--ag-col:880px;--ag-fade-x:var(--sp-6)}
@media (max-width:1100px){:root{--ag-gut:var(--sp-4);--ag-fade-x:var(--sp-4)}}
@media (max-width:768px){:root{--ag-gut:var(--sp-2);--ag-fade-x:var(--sp-3)}}
.ag-dock{gap:var(--sp-3)}
.ag-thread{gap:var(--sp-6);padding-bottom:var(--sp-5)}
@media (max-width:768px){.ag-thread{gap:var(--sp-5)}}
/* 대칭: 아바타 열을 없애 답이 가운데 열을 그대로 쓴다. 사람 말은 같은 열 안에서 오른쪽 */
.ag-msg.bot{grid-template-columns:minmax(0,1fr);gap:0}
.ag-msg.bot>.ag-av{display:none}
.ag-msg.bot>.ag-bd{gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);border-radius:14px}
@media (max-width:768px){.ag-msg.bot>.ag-bd{padding:var(--sp-3) var(--sp-4)}}
.ag-msg.me .ag-txt{padding:var(--sp-2) var(--sp-4)}
/* 쉬는 상태의 회색 테두리 없음 — 배경 대비로 나눈다. 키보드 초점 링(레드)과 입력창 포커스 윤곽(레드)은 둔다 */
.ag-head,.ag-help,.ag-help .ag-fmt div,.ag-msg.me .ag-txt,.ag-msg.bot>.ag-bd,.ag-steps,.ag-cite,.ag-chip,.ag-tag,.ag-state,.ag-note,.ag-empty,.ag-typing,.ag-done,.ag-src li,.ag-parse div,.agv,.agv-lane,.agv-vc,.agv-src,.ag-comp{border-color:transparent}
.ag-tag.tenant{border-color:transparent}.ag-tag.ghost{border-color:transparent;background:var(--surf2)}
.ag-cite,.ag-chip{background:var(--surf2)}
.agv{background:var(--surf2)}.agv-lane{background:var(--surf)}.agv-vc{background:var(--surf)}
.ag-cite:hover,.ag-cite:focus-visible,.ag-chip:hover,.ag-chip:focus-visible{border-color:transparent;background:var(--accbg)}
.ag-cite:focus-visible,.ag-chip:focus-visible,.ag-steps>summary:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.ag-comp{padding:var(--sp-3) var(--sp-4) var(--sp-2)}
.ag-comp:focus-within{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),var(--sh-3)}
/* 답을 기다리는 동안: 한 줄 진행 + 흘러 들어오는 답 글 */
.ag-pending>.ag-bd{gap:var(--sp-3)}
.ag-prog{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);color:var(--tx2);min-width:0}
.ag-prog b{font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ag-prog time{font:var(--fs-xs) var(--mono);color:var(--tx3);font-variant-numeric:tabular-nums;flex:none}
.ag-prog .sp{flex:1}
.ag-prog .dots{display:inline-flex;gap:3px;flex:none}.ag-prog .dots i{width:5px;height:5px;border-radius:50%;background:var(--acc);opacity:.35;animation:ag-dot 1.1s var(--ease-out) infinite}
.ag-prog .dots i:nth-child(2){animation-delay:.15s}.ag-prog .dots i:nth-child(3){animation-delay:.3s}
.ag-stream.on::after{content:'';display:inline-block;width:7px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--acc);opacity:.6;animation:ag-caret 1s steps(2,start) infinite}
@keyframes ag-caret{to{visibility:hidden}}
.ag-trlink{border:0;background:none}.ag-trlink .btn{font-size:var(--fs-xs);color:var(--tx2);gap:6px}
.ag-trdot{width:6px;height:6px;border-radius:50%;background:var(--acc);display:inline-block;flex:none}
@media (prefers-reduced-motion:reduce){.ag-stream.on::after{display:none}.ag-prog .dots i{animation:none;opacity:.7}}
/* 흔적 패널: 처리 단계 나무(깊이 1 단계 · 2 하위 단계 · 3 후보·사실 목록) */
.ag-tl .tl-g.focus{box-shadow:inset 3px 0 0 var(--acc)}
.ag-tl .tl-tree{display:flex;flex-direction:column;gap:2px;min-width:0}
.ag-tl .tl-n{min-width:0}
.ag-tl .tl-ns{display:grid;grid-template-columns:12px auto minmax(0,1fr) auto;gap:6px;align-items:baseline;padding:3px 4px;border-radius:var(--r-1);font-size:var(--fs-sm);cursor:default;list-style:none}
.ag-tl details>.tl-ns{cursor:pointer}.ag-tl details>.tl-ns::-webkit-details-marker{display:none}
.ag-tl details>.tl-ns:hover{background:var(--surf2)}.ag-tl details>.tl-ns:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.ag-tl .tl-ns b{font-weight:600;color:var(--tx);white-space:nowrap}.ag-tl .tl-n.d2 .tl-ns b{font-weight:500}
.ag-tl .tl-nd{color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ag-tl details[open]>.tl-ns .tl-nd{white-space:normal;overflow-wrap:anywhere}
.ag-tl .tl-ns em{font:normal var(--fs-xs) var(--mono);color:var(--tx3);font-variant-numeric:tabular-nums}
.ag-tl .tl-dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--tx3);display:inline-block;align-self:center}
.ag-tl .tl-dot.s-done{background:var(--acc);border-color:var(--acc)}.ag-tl .tl-dot.s-skipped{border-style:dashed}
.ag-tl .tl-dot.s-running{border-color:var(--acc);animation:ag-dot 1.1s var(--ease-out) infinite}
.ag-tl .tl-nb{margin:0 0 4px 9px;padding-left:9px;box-shadow:inset 1px 0 0 var(--e-dim);display:flex;flex-direction:column;gap:2px}
.ag-tl .tl-it{list-style:none;margin:2px 0;padding:0;display:flex;flex-direction:column;gap:3px}
.ag-tl .tl-it li{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:var(--fs-xs);color:var(--tx2);padding:3px 6px;border-radius:var(--r-1);background:var(--surf2);min-width:0}
.ag-tl .tl-it li .t{color:var(--tx);overflow-wrap:anywhere;min-width:0}.ag-tl .tl-it li em{font:normal var(--fs-xs) var(--mono);color:var(--acc)}
.ag-tl .tl-it li small{color:var(--tx3)}.ag-tl .tl-it li code{font:10.5px var(--mono);color:var(--tx3);overflow-wrap:anywhere}
.ag-tl .tl-it li.pre{display:block}.ag-tl .tl-pre{margin:0;white-space:pre-wrap;font:var(--fs-xs)/1.5 var(--mono);color:var(--tx2);max-height:240px;overflow:auto}
@media (prefers-reduced-motion:reduce){.ag-tl .tl-dot.s-running{animation:none}}
/* ===== §AGD 끝 ===== */

/* ───── §TR Brain > Knowledge > Teams Relay (relay.js, 2026-10-22) — 목록 | 보고서(초 상세본). 틀은 Document Control(§DC)과 같은 부품 ───── */
#s-brain .br-pane[data-p="relay"]{grid-template-columns:minmax(300px,420px) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr)}
#s-brain .tr-fbar{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0}
#s-brain .tr-fbar>select{flex:none;width:auto}
#s-brain .tr-fbar .sp{flex:1}
#s-brain .tr-fbar #tr-cnt{white-space:nowrap;font-size:var(--fs-xs);overflow:hidden;text-overflow:ellipsis}
#s-brain #tr-ban{grid-column:1/-1;flex-direction:column;align-items:stretch;gap:4px}
#s-brain #tr-ban[hidden]{display:none}
#s-brain #tr-ban code{font:var(--fs-xs) var(--mono);background:var(--su2,var(--su));padding:0 4px;border-radius:var(--r-1)}
#s-brain .tr-list{min-height:0}
#s-brain .tr-row{padding:8px var(--ds-pad-x);border-bottom:1px solid var(--line);cursor:pointer;outline:none;display:flex;flex-direction:column;gap:3px;min-width:0}
#s-brain .tr-row:hover{background:var(--hov,var(--su))}
#s-brain .tr-row.on{box-shadow:inset 0 0 0 1.5px var(--acc)}
#s-brain .tr-row:focus-visible{box-shadow:inset 0 0 0 2px var(--acc)}
#s-brain .tr-r1{display:flex;align-items:center;gap:6px;min-width:0;font-size:var(--fs-sm)}
#s-brain .tr-r1 b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#s-brain .tr-r1 .faint{white-space:nowrap;font:var(--fs-xs) var(--mono)}
#s-brain .tr-r1 .sp{flex:1}
#s-brain .tr-r2{font-size:var(--fs-sm);color:var(--tx);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#s-brain .tr-r3{font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#s-brain .tr-st{font:var(--fs-xs) var(--mono);color:var(--tx2);white-space:nowrap}
#s-brain .tr-st.st-sent{color:var(--ok,var(--tx2))}
#s-brain .tr-st.st-error{color:var(--err,var(--acc))}
#s-brain .tr-side{--sp-w:100%;border:1px solid var(--line);border-radius:var(--r-3);min-height:0}
#s-brain .tr-side .sp-h .tr-lk{display:flex;gap:2px;flex:none;padding-right:6px}
#s-brain .tr-pad{padding:12px 16px}
#s-brain .tr-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;font-size:var(--fs-sm)}
#s-brain .tr-md table{border-collapse:collapse;width:100%;margin:6px 0 10px}
#s-brain .tr-md th,#s-brain .tr-md td{border:1px solid var(--line);padding:4px 8px;text-align:left;vertical-align:top;font-size:var(--fs-sm)}
#s-brain .tr-md blockquote{margin:0 0 8px;padding:6px 10px;border-left:3px solid var(--acc);background:var(--su);color:var(--tx)}
#s-brain .tr-pl{margin-top:12px;font-size:var(--fs-xs)}
#s-brain .tr-pl pre{white-space:pre-wrap;overflow-wrap:anywhere;font:var(--fs-xs) var(--mono);background:var(--su);padding:8px;border-radius:var(--r-2)}
#s-brain .tr-foot{display:flex;align-items:center;gap:8px;padding:8px 12px;padding-right:calc(40px + var(--sp-4) + 8px);border-top:1px solid var(--line)}   /* 오른쪽 아래 AI 버튼(.ag-fab 40px)이 Send 를 덮지 않게 */
#s-brain .tr-foot .sp{flex:1}
@media (max-width:1100px){#s-brain .br-pane[data-p="relay"]{grid-template-columns:minmax(260px,330px) minmax(0,1fr)}}
@media (max-width:760px){#s-brain .br-pane[data-p="relay"]{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) minmax(0,1fr)}}

/* ───── §AGF 에이전트 독 전체 화면 (2026-10-22) — 머리 단추 #ag-fullbtn, html.ag-full. 겹침 막을 불투명 배경으로 바꿔 뒤 화면(머리줄 포함)을 가린다.
   독 · 세션 사이드바 · 흔적 패널의 자리 계산은 그대로(위쪽 한계 --ag-top 만 여백으로 — shell.html place()). ───── */
html.ag-full .ag-scrim{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}
html.ag-full .ag-scrim.open{opacity:1}
html.ag-full #ag-fullbtn{color:var(--acc)}

/* ───── §L3 외곽 여백 기준 (2026-10-22) — 화면의 바깥 여백은 화면을 담는 틀이 한 번만 준다(12px: .adm-frame · .br-body · 최상위 .screen-body).
   틀 안에 다시 들어간 .screen-body(예: Brain > Dictionary 의 dx-body 가 Settings 틀 #ap-dict 안에 있다)는 여백 0 — 두 겹이면 이웃 화면보다 17px 안쪽으로 밀렸다.
   검사: local-lab/e2e/chk-gutter.mjs (모든 Brain · Settings · RL 화면의 콘텐츠 바깥 경계가 틀에서 12px). ───── */
.adm-frame :is(.screen-body,#s-dict>.screen-body.dx-body){padding:0}   /* #s-dict>… 는 ID 규칙이라 :is 로 같은 무게를 넘는다 */

/* ───── §AGT 흔적 패널에서 연 근거 시트 (2026-10-22) — 흔적 패널(.ag-tl, z 116, 오른쪽 400px)이 열려 있으면 근거 시트를 그 왼쪽에 둔다(밑에 깔려 안 보였다).
   좁은 화면(≤1100px, 흔적 패널이 거의 전폭)에서는 시트를 흔적 패널 위에 올린다. ───── */
@media (min-width:1101px){html:has(.ag-tl.open) .ag-sheet{right:calc(min(400px,100vw - 16px) + 16px)}}
@media (max-width:1100px){html:has(.ag-tl.open) .ag-sheet{z-index:117}}

/* ───── §AGE 직전 질문 고쳐 다시 보내기 (2026-10-22) — 마지막 사용자 말풍선 아래 연필 단추 · 제자리 편집 ───── */
.ag-msg.me .ag-me-acts{display:flex;align-items:center;gap:6px}
.ag-msg.me .ag-me-acts[hidden]{display:none}
.ag-msg.me .ag-edit{width:min(640px,100%);display:flex;flex-direction:column;gap:6px}
.ag-msg.me .ag-edit textarea{width:100%;resize:vertical;min-height:64px;font:inherit;line-height:1.5}
.ag-msg.me .ag-edit-row{display:flex;align-items:center;gap:6px}
.ag-msg.me .ag-edit-row .sp{flex:1}
.ag-msg.me .ag-edit-row .hint{font-size:var(--fs-xs);color:var(--tx3)}

/* ───── §AGO 독 도안 가로 · 세로 (2026-10-22, app/agvis.js) — 도안마다 data-dir="h|v", 머리의 아이콘 단추(.agv-dirbtn, aria-pressed = 세로) · 크게 보기(.agv-zoom).
   기본 방향은 종류별(pipeline · task_flow 세로, definition · lineage · variable 가로). 줄이 넘치면 도안 안에서만 가로 스크롤(.agv 자체는 넘치지 않는다). ───── */
.agv-tools{display:inline-flex;align-items:center;gap:2px;flex:none;margin:-2px -4px -2px 0}
.agv-tools .btn.ico.sm{width:24px;height:24px;padding:0}
.agv-tools svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.agv-body{display:flex;flex-direction:column;min-width:0}
/* 파이프라인 가로: 단계가 왼쪽 → 오른쪽 칸, 화살표는 오른쪽으로 */
.agv-pipe[data-dir="h"] .agv-body{flex-direction:row;align-items:stretch;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.agv-pipe[data-dir="h"] .agv-lane{flex:0 0 150px;flex-direction:column;align-items:stretch;gap:4px}
.agv-pipe[data-dir="h"] .agv-lane .agv-cnt{align-self:flex-start}
.agv-pipe[data-dir="h"] .agv-arr{flex:0 0 72px;flex-direction:column;justify-content:center;align-items:stretch;padding:0 4px;gap:3px;text-align:center}
.agv-pipe[data-dir="h"] .agv-arr:not(:has(span)){flex-basis:24px}
.agv-pipe[data-dir="h"] .agv-arr i{width:100%;height:2px}
.agv-pipe[data-dir="h"] .agv-arr i::after{left:auto;right:-3px;bottom:auto;top:-3px;border:4px solid transparent;border-left-color:var(--e-copy);border-right:0}
.agv-pipe[data-dir="h"] .agv-arr span{white-space:normal;font-size:10px;line-height:1.25;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.agv-pipe[data-dir="h"] .agv-eng{flex:none;flex-direction:row;align-items:stretch;padding:14px 6px 6px}
/* 정의 카드 세로: 원천 → 단계 → 대상을 위에서 아래로 */
.agv-def[data-dir="v"] .agv-cv{grid-template-columns:minmax(0,1fr);gap:4px}
.agv-def[data-dir="v"] .agv-wire{width:2px;height:12px;justify-self:center}
.agv-def[data-dir="v"] .agv-wire::after{right:-3px;top:auto;bottom:-3px;border:4px solid transparent;border-top-color:var(--e-copy);border-bottom:0}
/* 계보 세로: 상류 줄 → 테이블 → 하류 줄, 연결선은 아래로(agvis.js edges) */
.agv-lin[data-dir="v"] .agv-lg{grid-template-columns:minmax(0,1fr);gap:24px 0}
.agv-lin[data-dir="v"] .agv-lc{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px 8px}
.agv-lin[data-dir="v"] .agv-lc>.agv-ch{flex:0 0 100%;text-align:center;margin:0}
.agv-lin[data-dir="v"] .agv-lc:nth-child(3)>.agv-ch{order:2}   /* 하류 머리는 아래에 — 테이블에서 내려오는 선이 글자를 지나지 않게 */
.agv-lin[data-dir="v"] .agv-ln{flex:0 1 180px;min-width:96px}
.agv-lin[data-dir="v"] .agv-lc>.agv-faint{flex:0 0 100%;text-align:center}
.agv-lin[data-dir="v"] .agv-lm{justify-self:center;width:min(260px,100%)}
/* 실행 순서 가로: 순서 줄이 왼쪽 → 오른쪽, 넘치면 가로 스크롤 */
.agv-flow[data-dir="h"] .agv-fl{flex-direction:row;gap:6px;border-left:0;border-top:2px solid var(--e-dim);padding:0;margin-top:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.agv-flow[data-dir="h"] .agv-fi{flex:0 0 150px;flex-wrap:wrap;gap:2px 6px;padding:12px 0 0;align-content:flex-start}
.agv-flow[data-dir="h"] .agv-fi::before{left:10px;top:-7px;margin-top:0}
.agv-flow[data-dir="h"] .agv-fi .agv-ord{min-width:0;text-align:left}
.agv-flow[data-dir="h"] .agv-fi .agv-mod{flex:1 1 100%;order:3}
/* 식별자 가로: 여섯 칸 한 줄 · 세로: 한 칸씩 */
.agv-var[data-dir="h"] .agv-vl{grid-template-columns:repeat(6,minmax(84px,1fr));overflow-x:auto;padding-bottom:2px;scrollbar-width:thin}
.agv-var[data-dir="v"] .agv-vl{grid-template-columns:minmax(0,1fr)}
/* 크게 보기 — 겹침 대화상자(툴팁 z 120 아래, 흔적 패널 z 116 · 근거 시트 z 117 위) */
.agv-zoom{position:fixed;inset:0;z-index:119;display:flex;align-items:center;justify-content:center;padding:var(--sp-5);box-sizing:border-box}
.agv-zoom-scrim{position:absolute;inset:0;background:var(--scrim)}
.agv-zoom-p{position:relative;width:min(1200px,100%);max-height:100%;min-height:0;display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-3);box-shadow:var(--sh-3)}
.agv-zoom-h{flex:none;display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--line);min-width:0}
.agv-zoom-h b{font-size:var(--fs-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.agv-zoom-h svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.agv-zoom-b{flex:1 1 auto;min-height:0;overflow:auto;padding:14px}
.agv-zoom-b .agv{border:0;padding:0;background:transparent}
.agv-zoom-b .agv-h>b{display:none}   /* 제목은 대화상자 머리에 */
.agv-zoom .agv-pipe[data-dir="h"] .agv-lane,.agv-zoom .agv-flow[data-dir="h"] .agv-fi{flex-basis:190px}
.agv-zoom .agv-lin[data-dir="v"] .agv-ln{flex-basis:220px}
@media (max-width:768px){.agv-zoom{padding:var(--sp-2)}}
.agv-zoom{animation:agv-zoom-in var(--dur-med) var(--ease-out)}
@keyframes agv-zoom-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.agv-zoom{animation:none}}
/* ===== §AGO 끝 ===== */

/* ───── §AGP 흔적 패널 배치 · 전체 화면 (2026-10-22, shell.html 흔적 패널) — .ag-tl[data-pos=right|left|bottom] · .ag-tl.full · 끄는 동안 .ag-tl-dz 겹침과 놓을 자리 .ag-tl-ghost.
   자리 규칙은 진짜 패널과 놓을 자리 미리보기가 함께 쓴다(:is). 왼쪽 · 아래는 독이 열려 있으면(≥1101px) 세션 사이드바 오른쪽(--ag-tl-x)에서 시작한다.
   근거 시트(.ag-sheet)는 어느 자리에서도 패널과 겹치지 않게 비켜 선다(오른쪽 = 패널 왼쪽 · 왼쪽 = 화면 오른쪽 · 아래 = 패널 위 · 전체 화면 = 패널 오른쪽 칸). ───── */
:root{--ag-tl-w:min(400px,calc(100vw - 16px));--ag-tl-h:min(36vh,360px);--ag-tl-x:8px}
@media (min-width:1101px){html.ag-lock{--ag-tl-x:calc(var(--ag-gut) * 2 + var(--ag-side-w))}html.ag-lock.ag-side-min{--ag-tl-x:calc(var(--ag-gut) * 2 + var(--ag-rail-w))}}   /* html.ag-lock = 독이 열림(shell.html open) */
.ag-tl-ghost{position:fixed;top:calc(var(--h-top) + 8px);right:8px;bottom:8px;width:var(--ag-tl-w);box-sizing:border-box;border-radius:var(--r-3)}
:is(.ag-tl,.ag-tl-ghost)[data-pos="left"]{right:auto;left:var(--ag-tl-x)}
:is(.ag-tl,.ag-tl-ghost)[data-pos="bottom"]{top:auto;left:var(--ag-tl-x);right:8px;width:auto;height:var(--ag-tl-h)}
.ag-tl[data-pos="left"]:not(.open){transform:translateX(-16px)}.ag-tl[data-pos="bottom"]:not(.open){transform:translateY(16px)}
.ag-tl .tl-hd{cursor:grab;user-select:none;-webkit-user-select:none}.ag-tl .tl-hd .btn{cursor:pointer}
.ag-tl .tl-grip{margin-left:-4px;color:var(--tx3);cursor:grab}.ag-tl .tl-grip:hover,.ag-tl .tl-grip:focus-visible,.ag-tl .tl-grip[aria-expanded="true"]{color:var(--acc)}
.ag-tl .tl-hd .btn[data-tl="full"][aria-pressed="true"]{color:var(--acc)}
.ag-tl.dragging{opacity:.55}
html.ag-tl-dragging,html.ag-tl-dragging *{cursor:grabbing!important}
.ag-tl-dz{position:fixed;inset:0;z-index:118}
.ag-tl-ghost{display:flex;align-items:center;justify-content:center;border:1.5px dashed var(--line2);background:color-mix(in srgb,var(--surf) 30%,transparent);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.ag-tl-ghost span{display:inline-flex;align-items:center;gap:6px;font:600 var(--fs-sm) var(--sans);color:var(--tx3);background:var(--surf);border:1px solid var(--line2);border-radius:var(--r-2);padding:4px 10px;box-shadow:var(--sh-1)}
.ag-tl-ghost span svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ag-tl-ghost.cur span::after{content:'Current';font:var(--fs-xs) var(--mono);color:var(--tx3);margin-left:4px}
.ag-tl-ghost.on{border:2px solid var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent);z-index:1}
.ag-tl-ghost.on span{color:var(--acc);border-color:var(--acc)}
.ag-tl-chip{position:fixed;pointer-events:none;font:600 var(--fs-xs)/1 var(--sans);color:var(--accfg);background:var(--acc);border-radius:var(--r-2);padding:5px 8px;box-shadow:var(--sh-2);white-space:nowrap}
.popover.ag-tl-pm{z-index:140}
/* 전체 화면 — 화면 가장자리 8px 만 남기고 덮는다. 남는 여백도 불투명(--bg 그림자) */
.ag-tl.full{top:8px;left:8px;right:8px;bottom:8px;width:auto;height:auto;box-shadow:0 0 0 100vmax var(--bg),var(--sh-3)}
.ag-tl.full:not(.open){transform:translateY(8px)}
.ag-tl.full .tl-b{padding:16px max(16px,calc((100% - 960px) / 2))}
/* 독 자리: 왼쪽이면 독이 패널 오른쪽으로 비켜 서고, 아래면 독 바닥이 패널 위로 올라간다(가운데 대칭 예약 408px 은 오른쪽 자리에서만) */
/* html 클래스(흔적 패널 JS tlApply 가 붙인다): ag-tl-p-right · ag-tl-p-left · ag-tl-p-bottom = 열림 + 그 자리(전체 화면 아님), ag-tl-full = 열림 + 전체 화면.
   :has() 대신 클래스를 쓴다 — html:has(...) 는 DOM 이 바뀔 때마다 문서 전체 스타일 재계산을 불러 긴 목록(초안 무한 스크롤)의 타이밍을 흔들었다(chk-layout-data) */
@media (min-width:1101px){
  html.ag-tl-p-left .ag-dock{left:calc(var(--ag-tl-x) + var(--ag-tl-w) + var(--ag-gut));right:var(--ag-gut)}
  html.ag-tl-p-bottom .ag-dock{left:calc(var(--ag-gut) * 2 + var(--ag-side-w));right:calc(var(--ag-gut) * 2 + var(--ag-side-w))}
  html.ag-side-min.ag-tl-p-bottom .ag-dock{left:calc(var(--ag-gut) * 2 + var(--ag-rail-w));right:calc(var(--ag-gut) * 2 + var(--ag-rail-w))}
}
html.ag-tl-p-bottom .ag-dock{bottom:calc(var(--ag-tl-h) + 16px)}
html.ag-tl-p-bottom .ag-fab{bottom:calc(var(--ag-tl-h) + 16px)}
/* 근거 시트 자리(기존 html:has(.ag-tl.open) .ag-sheet 규칙과 같은 무게 — 이 절이 뒤라 이긴다) */
@media (min-width:880px) and (max-width:1100px){html.ag-tl-on.ag-tl-p-right .ag-sheet{right:calc(var(--ag-tl-w) + 16px);width:min(440px,calc(100vw - var(--ag-tl-w) - 16px - var(--ag-gut)));z-index:113}}
html.ag-tl-on.ag-tl-p-left .ag-sheet{right:var(--ag-gut);z-index:117;width:max(min(280px,calc(100vw - 2 * var(--ag-gut))),min(440px,calc(100vw - var(--ag-tl-x) - var(--ag-tl-w) - 8px - 2 * var(--ag-gut))))}
html.ag-tl-on.ag-tl-p-bottom .ag-sheet{right:var(--ag-gut);bottom:calc(var(--ag-tl-h) + 16px);z-index:117}
html.ag-tl-on.ag-tl-full .ag-sheet{top:8px;right:8px;bottom:8px;z-index:117;width:min(440px,calc(100vw - 16px))}
@media (min-width:700px){.ag-sheet.open~.ag-tl.full{right:calc(min(440px,100vw - 16px) + 16px)}}
@media (prefers-reduced-motion:reduce){.ag-tl-ghost{transition:none}.ag-tl[data-pos]:not(.open),.ag-tl.full:not(.open){transform:none}}
/* ===== §AGP 끝 ===== */

/* ===== §BR 브랜드 심볼(2026-10-22) — 뉴로코어 CI 의 심볼만(글자 없음). 빨강 #C11224 = CI, 회색 마디는 테마 글자색 쪽으로.
   쓰는 곳: 상단 .apptop .brand i · 로그인 .lg-brand i · 위키 .dc-brand i · 에이전트 독 .ag-mark · 파비콘 /brand.svg(같은 그림, 테마는 SVG 안 @media). 화면 제목의 .bar .logo 사각 표시는 브랜드가 아니라 그대로 ===== */
:root{--nc-mark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'><g fill='%23c9ccd1' stroke='%23c9ccd1' stroke-linecap='round'><path d='M8.6 15.8Q12.6 18.4 15.6 21.6M31.2 23.8C29.6 27.6 28.5 30.8 28 34.2' fill='none' stroke-width='2.1'/><circle cx='5.6' cy='11.4' r='5.6' stroke='none'/><circle cx='19.6' cy='25.6' r='5.7' stroke='none'/><circle cx='32' cy='18.4' r='5.7' stroke='none'/><circle cx='27.6' cy='39.6' r='5.7' stroke='none'/></g><g fill='%23d0283a' stroke='%23d0283a' stroke-linecap='round'><path d='M19.2 11.2L38.4 6.6' stroke-width='4.8' fill='none'/><circle cx='38.6' cy='6.4' r='6.2' stroke='none'/><circle cx='19.2' cy='11.2' r='5.4' stroke='none'/></g></svg>")}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){--nc-mark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'><g fill='%236b7078' stroke='%236b7078' stroke-linecap='round'><path d='M8.6 15.8Q12.6 18.4 15.6 21.6M31.2 23.8C29.6 27.6 28.5 30.8 28 34.2' fill='none' stroke-width='2.1'/><circle cx='5.6' cy='11.4' r='5.6' stroke='none'/><circle cx='19.6' cy='25.6' r='5.7' stroke='none'/><circle cx='32' cy='18.4' r='5.7' stroke='none'/><circle cx='27.6' cy='39.6' r='5.7' stroke='none'/></g><g fill='%23c11224' stroke='%23c11224' stroke-linecap='round'><path d='M19.2 11.2L38.4 6.6' stroke-width='4.8' fill='none'/><circle cx='38.6' cy='6.4' r='6.2' stroke='none'/><circle cx='19.2' cy='11.2' r='5.4' stroke='none'/></g></svg>")}}
:root[data-theme="light"]{--nc-mark:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 46'><g fill='%236b7078' stroke='%236b7078' stroke-linecap='round'><path d='M8.6 15.8Q12.6 18.4 15.6 21.6M31.2 23.8C29.6 27.6 28.5 30.8 28 34.2' fill='none' stroke-width='2.1'/><circle cx='5.6' cy='11.4' r='5.6' stroke='none'/><circle cx='19.6' cy='25.6' r='5.7' stroke='none'/><circle cx='32' cy='18.4' r='5.7' stroke='none'/><circle cx='27.6' cy='39.6' r='5.7' stroke='none'/></g><g fill='%23c11224' stroke='%23c11224' stroke-linecap='round'><path d='M19.2 11.2L38.4 6.6' stroke-width='4.8' fill='none'/><circle cx='38.6' cy='6.4' r='6.2' stroke='none'/><circle cx='19.2' cy='11.2' r='5.4' stroke='none'/></g></svg>")}
.nc-mark,.apptop .brand i,.dc-brand i,.lg-brand i,.ag-head .ag-mark{background:var(--nc-mark) center/contain no-repeat!important;border-radius:0!important;box-shadow:none!important;border:0!important;display:block;flex:none}
.apptop .brand i,.dc-brand i{width:22px!important;height:21px!important}
.ag-head .ag-mark{width:17px!important;height:16px!important}
/* ===== §BR 끝 ===== */