*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
/* ── Enia 원시 토큰 (enia_design.md §2) ── */
--blue-50:#eaf7fb;--blue-100:#cbebf5;--blue-200:#9ddaed;--blue-300:#63c6e2;--blue-400:#3ab4da;
--blue-500:#20a7d4;--blue-600:#1b8cb3;--blue-700:#176f8f;--blue-800:#14586f;--blue-900:#123f4e;
--orange-50:#fef4e6;--orange-100:#fce3bf;--orange-200:#f9cb85;--orange-300:#f6b44f;--orange-400:#f4a62f;
--orange-500:#f29919;--orange-600:#d07d0e;--orange-700:#a9630d;--orange-800:#834d0f;--orange-900:#5e390e;
--neutral-0:#ffffff;--neutral-50:#f7f8f9;--neutral-100:#eef0f2;--neutral-200:#dde0e3;--neutral-300:#c4c8cd;
--neutral-400:#a7acb2;--neutral-500:#8b9096;--neutral-600:#6c7176;--neutral-700:#52565a;--neutral-800:#35383b;
--neutral-900:#1d1f21;--neutral-950:#111214;
--success-500:#1fa971;--success-700:#0f7a51;--success-200:#a9dcc4;--success-50:#e7f6ef;
--warning-500:#f29919;--warning-700:#9c5a0b;/* warning-50 위 4.97:1 (AA) */--warning-200:#f9cb85;--warning-50:#fef4e6;
--danger-500:#e2483d;--danger-700:#b32b21;--danger-200:#f3c9c6;--danger-50:#fbeae9;
--info-500:#20a7d4;--info-700:#176f8f;--info-50:#eaf7fb;
/* ── 시맨틱 별칭 (제품 코드는 이것만 쓴다) ── */
--brand:var(--blue-500);--brand-hover:var(--blue-600);--brand-active:var(--blue-700);--brand-subtle:var(--blue-50);
--accent:var(--orange-500);--accent-hover:var(--orange-600);--accent-subtle:var(--orange-50);
--text-strong:var(--neutral-900);--text-body:var(--neutral-700);--text-muted:var(--neutral-500);
--text-inverse:var(--neutral-0);--text-brand:var(--blue-600);
--surface-page:var(--neutral-50);--surface-card:var(--neutral-0);--surface-sunken:var(--neutral-100);--surface-inverse:var(--neutral-900);
--border-subtle:var(--neutral-200);--border-subtle-2:var(--neutral-100);--border-default:var(--neutral-300);--border-strong:var(--neutral-400);--border-brand:var(--blue-500);
--gradient-hero:linear-gradient(100deg,var(--blue-800) 0%,var(--blue-800) 48%,var(--blue-900) 100%);
/* 형태 · 그림자 · 모션 */
--radius-xs:4px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-pill:999px;
--shadow-xs:0 1px 2px rgba(29,31,33,.10);
--shadow-sm:0 1px 3px rgba(29,31,33,.08),0 1px 2px rgba(29,31,33,.04);
--shadow-md:0 6px 18px -8px rgba(29,31,33,.24);
--shadow-lg:0 16px 40px -12px rgba(29,31,33,.22);
--shadow-inset:inset 0 1px 2px rgba(29,31,33,.16);
--duration-fast:120ms;--duration-base:200ms;--duration-slow:320ms;
--ease-standard:cubic-bezier(.4,0,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
--font-mono:'SF Mono',Menlo,Consolas,monospace;
/* ── 테마가 바꾸는 역할 토큰 ── */
--rail-bg:var(--surface-inverse);--rail-text:var(--neutral-200);--rail-text-muted:var(--neutral-400);
--rail-line:rgba(255,255,255,.08);--rail-hover:rgba(255,255,255,.07);--rail-active:var(--blue-800);
--rail-badge-bg:rgba(255,255,255,.16);
--hi:var(--brand);--hi-ink:var(--brand-active);--hi-bg:var(--brand-subtle);--hi-fg:var(--brand-active);
--accent-fill:var(--accent);--on-accent:var(--text-strong);--badge-bg:var(--brand-active);
--accent-glow:rgba(32,167,212,.16);
--overlay:rgba(29,31,33,.5);
--text-on-inverse-muted:var(--neutral-200);--text-on-inverse-hi:var(--blue-200);
--kpi-hi-bg:var(--surface-inverse);--pipe-bg:var(--gradient-hero);
--th-bg:var(--neutral-100);--row-hover:var(--neutral-50);--ft-bg:var(--neutral-50);
--ok-bd:var(--success-200);--warn-bd:var(--warning-200);--err-bd:var(--danger-200);
--scale-0:var(--danger-200);--scale-1:var(--neutral-200);--scale-2:var(--blue-200);
--scale-3:var(--orange-300);--scale-4:#3fb98a;--scale-5:var(--success-700);
--cov-0:var(--danger-200);--cov-1:var(--orange-200);--cov-2:var(--blue-200);--cov-3:var(--success-500);
/* 식별자 칩 9종 */
--id-bd-bg:#eef0f2;--id-bd-fg:#52565a;--id-bd-bd:#dde0e3;
--id-rq-bg:#eaf7fb;--id-rq-fg:#14586f;--id-rq-bd:#cbebf5;
--id-dc-bg:#e4eef3;--id-dc-fg:#123f4e;--id-dc-bd:#c3dbe5;
--id-fn-bg:#ede9f6;--id-fn-fg:#4b3b7a;--id-fn-bd:#ddd5ee;
--id-sc-bg:#fef4e6;--id-sc-fg:#834d0f;--id-sc-bd:#fce3bf;
--id-tb-bg:#e7f6ef;--id-tb-fg:#0f5c3e;--id-tb-bd:#c9e9dd;
--id-if-bg:#fbf0de;--id-if-fg:#7a4a08;--id-if-bd:#f2ddb9;
--id-tc-bg:#fbe9f1;--id-tc-fg:#8e1b54;--id-tc-bd:#f3d2e2;
--id-df-bg:#fbeae9;--id-df-fg:#b32b21;--id-df-bd:#f3c9c6;
--id-dead-a:#fbecea;--id-dead-b:#f6dcd9;
--mark-bg:#ffe08a;--mark-del:#f8c3be;
/* ── 기존 33개 변수 = Enia 별칭 호환 레이어 (app.js 인라인 style 이 그대로 참조한다) ── */
--navy-900:var(--surface-inverse);--navy-800:var(--blue-800);--navy-700:var(--brand-active);
--navy-500:var(--brand);--navy-300:var(--blue-300);--navy-100:var(--brand-subtle);
--orange:var(--accent);
--ink:var(--text-strong);--ink-2:var(--text-body);--muted:var(--text-body);--faint:var(--neutral-600);
--line:var(--border-subtle);--line-2:var(--border-subtle-2);--canvas:var(--surface-page);--surface:var(--surface-card);
--ok:var(--success-700);--ok-bg:var(--success-50);--warn:var(--warning-700);--warn-bg:var(--warning-50);
--err:var(--danger-700);--err-bg:var(--danger-50);--info:var(--info-700);--info-bg:var(--info-50);
--idle:var(--text-muted);--idle-bg:var(--surface-sunken);
--focus-ring:var(--blue-700);
--r:var(--radius-sm);--r-lg:var(--radius-lg);--rail:248px;--top:60px;
--sh:var(--shadow-sm);--sh-lg:var(--shadow-lg);
}
/* ── 보조 테마 · 프로토타입 룩 ── */
html[data-theme='docdeck']{
--navy-900:#0F2444;--navy-800:#16305A;--navy-700:#1B3A6B;--navy-500:#2E5591;--navy-300:#7C9AC6;--navy-100:#E8EEF7;
--orange:#F47B20;--orange-600:#D9670F;--orange-50:#FFF3E8;
--ink:#16202E;--ink-2:#33415C;--muted:#5C6980;--faint:#5A6678;
--line:#E2E8F1;--line-2:#EEF2F7;--canvas:#F4F6FA;--surface:#FFFFFF;
--ok:#0D6E49;--ok-bg:#E5F5EE;--warn:#8F5A00;--warn-bg:#FFF6E3;--err:#C8322B;--err-bg:#FDECEB;
--info:#2563EB;--info-bg:#E9F0FE;--idle:#8894A8;--idle-bg:#EFF2F6;
--r:8px;--r-lg:14px;
--sh:0 1px 2px rgba(15,36,68,.06),0 8px 24px -12px rgba(15,36,68,.18);
--sh-lg:0 24px 64px -20px rgba(15,36,68,.35);
--focus-ring:#F47B20;
--rail-bg:#0F2444;--rail-text:#D6E0EE;--rail-text-muted:#8CA3C6;--rail-active:#1B3A6B;--rail-badge-bg:rgba(255,255,255,.16);
--hi:#F47B20;--hi-ink:#F47B20;--hi-bg:#FFF3E8;--hi-fg:#D9670F;
--accent-fill:#AE540A;--accent-hover:#8F440A;--on-accent:#fff;--badge-bg:#AE540A;--accent-glow:rgba(244,123,32,.11);
--overlay:rgba(11,25,48,.55);
--text-on-inverse-muted:#A9BEDD;--text-on-inverse-hi:#FFCB9B;
--kpi-hi-bg:linear-gradient(160deg,#16305A,#0F2444);
--pipe-bg:linear-gradient(150deg,#12294B 0%,#1B3A6B 62%,#254A85 100%);
--th-bg:#FAFBFD;--row-hover:#FBFCFE;--ft-bg:#FAFCFE;
--ok-bd:#C9E9DD;--warn-bd:#F6DCC3;--err-bd:#F3C9C6;
--scale-0:#F5D5D2;--scale-1:#DFE4EC;--scale-2:#9FC0F0;--scale-3:#F47B20;--scale-4:#3AA97C;--scale-5:#12855C;
--cov-0:#F0D6D3;--cov-1:#FCE2C4;--cov-2:#BBD7F5;--cov-3:#3AA97C;
--id-bd-bg:#EDEFF4;--id-bd-fg:#4A5568;--id-bd-bd:#DDE1E9;
--id-rq-bg:#E9F0FE;--id-rq-fg:#1D4ED8;--id-rq-bd:#CFE0FC;
--id-dc-bg:#E8EEF7;--id-dc-fg:#1B3A6B;--id-dc-bd:#CFDDF1;
--id-fn-bg:#EDE7FA;--id-fn-fg:#6D30B0;--id-fn-bd:#DCD0F2;
--id-sc-bg:#FFF3E8;--id-sc-fg:#9A4F05;--id-sc-bd:#F6DCC3;
--mark-bg:#FFE08A;--mark-del:#F8C3BE;
--id-tb-bg:#E3F4EE;--id-tb-fg:#0E7150;--id-tb-bd:#C9E9DD;
--id-if-bg:#FDF0E1;--id-if-fg:#8A5700;--id-if-bd:#F4DFBC;
--id-tc-bg:#FCE9F3;--id-tc-fg:#A81E64;--id-tc-bd:#F5D2E5;
--id-df-bg:#FDECEB;--id-df-fg:#C8322B;--id-df-bd:#F3C9C6;
--id-dead-a:#FBECEB;--id-dead-b:#F7DEDC;
}
html,body{height:100%}
body{font-family:Pretendard,'Pretendard Variable',-apple-system,'Malgun Gothic','맑은 고딕',sans-serif;background:var(--canvas);color:var(--ink);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-sm);border:3px solid transparent;background-clip:content-box}
.code{font-family:var(--font-mono);font-size:12px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* 인라인 SVG 아이콘 — 스프라이트는 index.html <svg id="ico"> 에 있다 */
#ico{display:none}
.ic{width:18px;height:18px;flex:0 0 auto;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none;vertical-align:-4px}
.ic.sep{width:14px;height:14px;color:var(--faint)}

/* ── shell ── */
.mk{width:26px;height:26px;border-radius:var(--radius-sm);background:var(--accent-fill);display:grid;place-items:center;color:var(--on-accent);font-weight:800;font-size:13px;flex:0 0 auto}

.iconbtn{width:36px;height:36px;border-radius:var(--r);border:1px solid transparent;background:transparent;cursor:pointer;display:grid;place-items:center;position:relative;color:var(--ink-2);transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.iconbtn:hover{background:var(--canvas);border-color:var(--line)}
.iconbtn .bdg{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:var(--radius-pill);background:var(--badge-bg);color:var(--text-inverse);font-size:10px;font-weight:800;display:grid;place-items:center;padding:0 4px;border:2px solid var(--surface)}
.av{width:30px;height:30px;border-radius:50%;background:var(--navy-700);color:var(--text-inverse);display:grid;place-items:center;font-size:12px;font-weight:700}
.av.o{background:var(--badge-bg)}

/* ── typography / heads ── */
.ph{display:flex;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.ph h1{font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.25}
.ph p{color:var(--muted);font-size:13px;margin-top:4px;max-width:72ch}
.ph .sp{flex:1}
h2.sec{font-size:15px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
h2.sec small{font-weight:500;color:var(--faint);font-size:12px}
h3.sub{font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:8px}

/* ── card ── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh)}
.card>.hd{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-2)}
.card>.hd .sp{flex:1}
.card>.bd{padding:16px}
.card>.bd.flush{padding:0}
.card>.ft{padding:12px 16px;border-top:1px solid var(--line-2);background:var(--ft-bg);border-radius:0 0 var(--r-lg) var(--r-lg);display:flex;gap:8px;align-items:center}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
@media(max-width:1180px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.split-l{grid-template-columns:1fr}}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.btn:hover{background:var(--canvas);border-color:var(--border-default)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--navy-700);border-color:var(--navy-700);color:var(--text-inverse)}
.btn.pri:hover{background:var(--navy-800);border-color:var(--navy-800)}
.btn.acc{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.btn.acc:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.gho{border-color:transparent;background:transparent;color:var(--navy-700)}
.btn.gho:hover{background:var(--navy-100)}
.btn.dan{color:var(--err);border-color:var(--err-bd)}
.btn.dan:hover{background:var(--err-bg)}
.btn.sm{height:32px;padding:0 10px;font-size:12px;border-radius:var(--radius-sm)}
.btn.lg{height:40px;padding:0 20px;font-size:14px}
.btn:disabled,.btn:disabled:hover{background:var(--surface-sunken);border-color:var(--border-subtle);color:var(--text-muted);opacity:1;cursor:not-allowed}
.btn.blk{width:100%}
.btn .ic{width:16px;height:16px;vertical-align:-3px}

/* ── chips / badges ── */
.st{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:var(--radius-pill);font-size:12px;font-weight:700;white-space:nowrap}
.st::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.st.idle{background:var(--idle-bg);color:var(--ink-2)}
.st.run{background:var(--info-bg);color:var(--info)}
.st.rev{background:var(--warn-bg);color:var(--warn)}
.st.ok{background:var(--ok-bg);color:var(--ok)}
.st.err{background:var(--err-bg);color:var(--err)}
.st.warn{background:var(--warn-bg);color:var(--warn)}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--radius-xs);background:var(--canvas);border:1px solid var(--line);font-size:12px;color:var(--muted);font-weight:600}
.tag.pm{background:var(--navy-100);border-color:var(--navy-300);color:var(--navy-700)}
.tag.dv{background:var(--id-fn-bg);border-color:var(--id-fn-bd);color:var(--id-fn-fg)}
.tag.ai{background:var(--idle-bg);border-color:var(--line);color:var(--ink-2)}

/* ── table ── */
table.tb{width:100%;border-collapse:collapse}
table.tb th{text-align:left;font-size:12px;font-weight:700;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);background:var(--th-bg);position:sticky;top:0;z-index:2;white-space:nowrap}
table.tb td{padding:10px 12px;border-bottom:1px solid var(--line-2);font-size:13px;vertical-align:middle}
table.tb tr:last-child td{border-bottom:none}
table.tb tbody tr:hover{background:var(--row-hover)}
table.tb tr.clk{cursor:pointer}
table.tb td.n,table.tb th.n{text-align:right;font-variant-numeric:tabular-nums}
table.tb td.c,table.tb th.c{text-align:center}
.tbwrap{overflow:auto;max-height:none}
.tbwrap.sc{max-height:460px}

/* ── forms ── */
.fld{margin-bottom:16px}
.fld>label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:var(--ink-2)}
.fld>label .req{color:var(--err);margin-left:2px}
.fld .hint{font-size:12px;color:var(--faint);margin-top:4px;line-height:1.5}
.inp,select.inp,textarea.inp{width:100%;height:36px;border:1px solid var(--line);border-radius:var(--r);padding:0 12px;background:var(--surface);font-size:13px;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
textarea.inp{height:auto;padding:8px 12px;line-height:1.6;resize:vertical}
.inp:hover{border-color:var(--border-default)}
.inp:focus{border-color:var(--border-brand);outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.row{display:flex;gap:12px}.row>*{flex:1;min-width:0}
.chk{display:flex;align-items:flex-start;gap:8px;font-size:13px;cursor:pointer;padding:4px 0}
.chk input{margin-top:3px;accent-color:var(--brand);width:16px;height:16px;flex:0 0 auto;cursor:pointer}
.chk small{display:block;color:var(--faint);font-size:12px;line-height:1.45}
.seg{display:inline-flex;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r);padding:4px;gap:2px}
.seg button{border:none;background:transparent;padding:4px 12px;border-radius:var(--radius-xs);font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);transition:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--navy-700);box-shadow:var(--shadow-xs)}
.sw{position:relative;display:inline-block;width:40px;height:22px;flex:0 0 auto;vertical-align:middle;line-height:0}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:2}
.sw i{position:absolute;inset:0;display:block;background:var(--border-strong);border:1px solid var(--border-default);border-radius:var(--radius-pill);transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard);cursor:pointer;box-shadow:var(--shadow-inset)}
.sw i::after{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;background:var(--surface);border-radius:50%;transition:transform var(--duration-fast) var(--ease-standard);box-shadow:var(--shadow-xs)}
.sw input:checked+i{background:var(--navy-700);border-color:var(--navy-800)}
.sw input:checked+i::after{transform:translateX(18px)}
.sw input:focus-visible+i{outline:3px solid var(--focus-ring);outline-offset:2px}
.sw input:disabled+i{opacity:.45;cursor:not-allowed}
.swrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.swrow:last-child{border-bottom:none}
.swrow .tx{flex:1}
.swrow .tx b{display:block;font-size:13px;font-weight:600}
.swrow .tx small{color:var(--faint);font-size:12px}

/* ── dropzone ── */
.dz{border:2px dashed var(--border-default);border-radius:var(--r-lg);padding:28px 20px;text-align:center;background:var(--ft-bg);cursor:pointer;transition:border-color var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)}
.dz:hover,.dz.hot{border-color:var(--hi);background:var(--hi-bg)}
.dz .ic{display:block;width:28px;height:28px;margin:0 auto 8px;color:var(--faint)}
.dz b{display:block;font-size:14px;font-weight:700;margin-bottom:4px}
.dz small{color:var(--muted);font-size:12px}
.fl{display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-top:8px}
/* .doc 는 문서 미리보기 종이(398행)와 클래스 이름이 겹친다 — 뒤에 오는 그 규칙이 같은 특이도로 이기므로
   배지 쪽 선택자를 .fi.doc 로 한 단계 올리고 종이가 주는 여백·테두리·글꼴을 되돌린다 */
.fi,.fi.doc{width:30px;height:34px;border-radius:var(--radius-xs);display:inline-grid;place-items:center;font-size:10px;font-weight:800;color:var(--text-inverse);flex:0 0 auto;line-height:1;padding:0;border:0;font-family:inherit}
.fl .fi{width:30px;height:34px;border-radius:var(--radius-xs);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--text-inverse);flex:0 0 auto}
/* 파일 형식 배지 — 원 제품 브랜드색이라 테마와 무관하게 고정한다 */
.fi.hwp{background:#0F6FD1}.fi.doc{background:#2B579A}.fi.xls{background:#1E7145}.fi.ppt{background:#C43E1C}.fi.pdf{background:#B32B21}.fi.zip{background:#52565A}.fi.md{background:var(--navy-700)}
.fl .tx{flex:1;min-width:0}
.fl .tx b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fl .tx small{color:var(--faint);font-size:12px}

/* ── progress ── */
.pg{height:6px;border-radius:var(--radius-pill);background:var(--line-2);overflow:hidden}
.pg i{display:block;height:100%;background:var(--navy-700);border-radius:var(--radius-pill);transition:width var(--duration-slow) var(--ease-out)}
.pg.acc i{background:var(--hi-fg)}
.pg.ok i{background:var(--ok)}
.pg.sm{height:4px}

/* ── kpi ── */
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh)}
.kpi .lb{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.kpi .vl{font-size:28px;font-weight:800;letter-spacing:-.035em;margin:4px 0;font-variant-numeric:tabular-nums;line-height:1.1}
.kpi .vl u{text-decoration:none;font-size:14px;font-weight:600;color:var(--muted);margin-left:2px}
.kpi .dl{font-size:12px;color:var(--faint)}
.kpi .dl b.up{color:var(--ok)}.kpi .dl b.dn{color:var(--err)}
.kpi.hi{background:var(--kpi-hi-bg);border-color:transparent;color:var(--text-inverse)}
.kpi.hi .lb{color:var(--text-on-inverse-muted)}.kpi.hi .dl{color:var(--text-on-inverse-muted)}.kpi.hi .vl u{color:var(--text-on-inverse-muted)}

/* ── pipeline (hero) ── */
.pipe{background:var(--pipe-bg);border-radius:var(--r-lg);padding:20px 24px;color:var(--text-inverse);position:relative;overflow:hidden;box-shadow:var(--shadow-md)}
.pipe .ttl{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative;z-index:1;flex-wrap:wrap}
.pipe .ttl b{font-size:15px;font-weight:700;letter-spacing:-.02em}
.pipe .ttl .sp{flex:1}
.pipe .ttl small{color:var(--text-on-inverse-muted);font-size:12px}
.pipe .steps{display:flex;gap:0;position:relative;z-index:1}

/* ── matrix ── */
.mx{display:grid;gap:4px}
.mx .mrow{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center}
.cell{width:20px;height:20px;border-radius:var(--radius-xs);background:var(--idle-bg);cursor:pointer;position:relative;border:1px solid transparent;transition:transform var(--duration-fast) var(--ease-standard)}
.cell:hover{transform:scale(1.28);z-index:5;border-color:var(--ink)}
.cell.s0{background:var(--scale-0)}.cell.s1{background:var(--scale-1)}.cell.s2{background:var(--scale-2)}
.cell.s3{background:var(--scale-3)}.cell.s4{background:var(--scale-4)}.cell.s5{background:var(--scale-5)}
.lg{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center}
.lg i{width:12px;height:12px;border-radius:var(--radius-xs);display:inline-block;margin-right:4px;vertical-align:-1px}

/* ── tree ── */
.tree{font-size:13px}
.tnode{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-xs);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease-standard)}
.tnode:hover{background:var(--canvas)}
.tnode.on{background:var(--navy-100);color:var(--navy-700);font-weight:600}
.tnode .ic{width:16px;height:16px;flex:0 0 auto;color:var(--faint)}
.tnode.on .ic{color:var(--navy-700)}
.tnode .ct{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tkids{margin-left:16px;border-left:1px solid var(--line);padding-left:8px}

/* ── timeline / log ── */
.tl{position:relative;padding-left:20px}
.tl::before{content:"";position:absolute;left:5px;top:4px;bottom:4px;width:2px;background:var(--line)}
.tl .it{position:relative;padding-bottom:16px}
.tl .it:last-child{padding-bottom:0}
.tl .it::before{content:"";position:absolute;left:-19px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--surface);border:2px solid var(--navy-300)}
.tl .it.a::before{border-color:var(--hi);background:var(--hi)}
.tl .it b{font-size:13px;font-weight:600;display:block}
.tl .it small{color:var(--faint);font-size:12px}
.tl .it p{font-size:13px;color:var(--muted);margin-top:2px}
/* 터미널 — 어두운 표면이라 두 테마 공통값이다 */
.term{background:#0D1B2E;border-radius:var(--r);padding:12px 16px;font-family:var(--font-mono);font-size:12px;line-height:1.85;color:#B7C7DD;max-height:250px;overflow:auto}
.term span.tm{color:#8FA6C8}
.term span.ok{color:#4FD69C}
.term span.wn{color:#FFC46B}
.term span.er{color:#FF9A90}
.term span.in{color:#7FB4FF}
.term .ic{width:13px;height:13px;vertical-align:-2px}

/* ── modal ── */
.ov{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(3px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
.ov[hidden]{display:none}
.mdl{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:660px;box-shadow:var(--sh-lg);animation:pop var(--duration-base) var(--ease-out)}
.mdl.w780{max-width:780px}.mdl.w960{max-width:960px}.mdl.w1140{max-width:1140px}.mdl.w480{max-width:480px}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.99)}to{opacity:1;transform:none}}
.mdl>.hd{display:flex;align-items:flex-start;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.mdl>.hd .tx{flex:1;min-width:0}
.mdl>.hd h3{font-size:16px;font-weight:700;letter-spacing:-.02em}
.mdl>.hd p{font-size:13px;color:var(--muted);margin-top:4px}
.mdl>.bd{padding:20px;max-height:66vh;overflow-y:auto}
.mdl>.bd.flush{padding:0}
.mdl>.ft{padding:12px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center;background:var(--ft-bg);border-radius:0 0 var(--r-lg) var(--r-lg)}
.mdl>.ft .sp{flex:1}
/* 모달 이동·크기 조절 — 헤더를 끌면 이동, 오른쪽 아래 모서리를 끌면 크기 변경 */
.mdl{position:relative;display:flex;flex-direction:column}
.mdl>.hd{cursor:move;user-select:none}
.mdl.free{position:fixed;max-width:none}
.mdl.free>.bd{flex:1 1 auto;min-height:0;max-height:none}
.mdl>.rsz{position:absolute;right:0;bottom:0;width:18px;height:18px;cursor:nwse-resize;border-radius:0 0 var(--r-lg) 0;background:linear-gradient(135deg,transparent 46%,var(--line) 46%,var(--line) 58%,transparent 58%,transparent 70%,var(--line) 70%,var(--line) 82%,transparent 82%)}
.x{width:36px;height:36px;border:none;background:transparent;border-radius:var(--radius-sm);cursor:pointer;color:var(--muted);flex:0 0 auto;display:grid;place-items:center;transition:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}
.x:hover{background:var(--canvas);color:var(--ink)}

/* ── tabs ── */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{border:none;background:transparent;padding:8px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.tabs button.on{color:var(--navy-700);border-bottom-color:var(--hi)}
.tabs button:hover{color:var(--ink)}

/* ── misc ── */
.empty{text-align:center;padding:44px 20px;color:var(--muted)}
.empty .ic{display:block;width:28px;height:28px;margin:0 auto 12px;color:var(--faint)}
.empty b{display:block;font-size:14px;color:var(--ink);margin-bottom:4px}
.empty p{font-size:13px;max-width:44ch;margin:0 auto 16px}
.note{border-left:3px solid var(--hi);background:var(--hi-bg);padding:12px;border-radius:0 var(--r) var(--r) 0;font-size:13px;line-height:1.6}
.note.b{border-color:var(--navy-500);background:var(--navy-100)}
.note.g{border-color:var(--ok);background:var(--ok-bg)}
.note.r{border-color:var(--err);background:var(--err-bg)}
.note b{font-weight:700}
.kv{display:grid;grid-template-columns:116px 1fr;gap:8px 12px;font-size:13px}
.kv dt{color:var(--muted);font-size:13px}
.kv dd{font-weight:600}
.sepr{height:1px;background:var(--line-2);margin:16px 0}
@keyframes sl{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
/* 산출물 원문 미리보기 — 흰 종이가 정본이라 테마와 무관하게 고정한다 */
.doc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 32px;font-family:'Batang','바탕',serif;font-size:13px;line-height:1.85;color:#111}
.doc h4{font-family:Pretendard,sans-serif;font-size:17px;font-weight:700;text-align:center;margin-bottom:16px;letter-spacing:-.02em}
.doc h5{font-family:Pretendard,sans-serif;font-size:14px;font-weight:700;margin:16px 0 8px}
.doc p{margin-bottom:8px;text-indent:.5em}
.doc table{width:100%;border-collapse:collapse;margin:8px 0;font-family:Pretendard,sans-serif;font-size:12px}
.doc table th,.doc table td{border:1px solid #B9C3D2;padding:6px 8px}
.doc table th{background:#EEF2F7;font-weight:700;text-align:center}
.doc .slot{background:#FFF3E8;border-bottom:2px solid #D9670F;cursor:help;padding:0 1px}
.doc .slot:hover{background:#FFE0C2}
.pre{background:#0D1B2E;color:#B7C7DD;border-radius:var(--r);padding:16px;font-family:var(--font-mono);font-size:12px;line-height:1.9;overflow:auto;white-space:pre}
.srch{position:relative;flex:1;max-width:340px}
.srch input{width:100%;height:36px;border:1px solid var(--line);border-radius:var(--r);padding:0 12px 0 36px;font-size:13px;background:var(--surface)}
.srch .ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint);pointer-events:none}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filters select{height:36px;border:1px solid var(--line);border-radius:var(--r);padding:0 28px 0 12px;font-size:13px;background:var(--surface);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);background-position:calc(100% - 16px) 16px,calc(100% - 11px) 16px;background-size:5px 5px;background-repeat:no-repeat}

/* ══════ v3 추가 — 추적성 / 비교검증 ══════ */
/* 식별체계 색 코드 — 9종. 값은 --id-* 토큰이 테마별로 준다 */
.lnk{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:12px;font-weight:700;letter-spacing:-.01em;cursor:pointer;border:1px solid transparent;white-space:nowrap;transition:filter var(--duration-fast) var(--ease-standard)}
.lnk:hover{filter:brightness(.94)}
.lnk.bd{background:var(--id-bd-bg);color:var(--id-bd-fg);border-color:var(--id-bd-bd)}
.lnk.rq{background:var(--id-rq-bg);color:var(--id-rq-fg);border-color:var(--id-rq-bd)}
.lnk.dc{background:var(--id-dc-bg);color:var(--id-dc-fg);border-color:var(--id-dc-bd)}
.lnk.fn{background:var(--id-fn-bg);color:var(--id-fn-fg);border-color:var(--id-fn-bd)}
.lnk.sc{background:var(--id-sc-bg);color:var(--id-sc-fg);border-color:var(--id-sc-bd)}
.lnk.tb{background:var(--id-tb-bg);color:var(--id-tb-fg);border-color:var(--id-tb-bd)}
.lnk.if{background:var(--id-if-bg);color:var(--id-if-fg);border-color:var(--id-if-bd)}
.lnk.tc{background:var(--id-tc-bg);color:var(--id-tc-fg);border-color:var(--id-tc-bd)}
.lnk.df{background:var(--id-df-bg);color:var(--id-df-fg);border-color:var(--id-df-bd)}
.lnk.dead{background:repeating-linear-gradient(135deg,var(--id-dead-a),var(--id-dead-a) 4px,var(--id-dead-b) 4px,var(--id-dead-b) 8px);color:var(--id-df-fg);border-color:var(--id-df-bd);text-decoration:line-through}

/* 추적 체인 */
.chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.chain .ar{color:var(--faint);font-size:12px}
.chainbox{border:1px solid var(--line);border-radius:var(--r);padding:12px;background:var(--ft-bg)}
.chainbox+.chainbox{margin-top:8px}
.chainbox .cl{font-size:12px;color:var(--faint);font-weight:700;margin-bottom:8px;letter-spacing:.02em}

/* 추적 레인 */
.lane{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;position:relative}
.lane .col{padding:0 8px;min-width:0}
.lane .ch{font-size:12px;font-weight:800;color:var(--muted);text-align:center;padding:4px 0 8px;border-bottom:2px solid var(--line-2);margin-bottom:8px;letter-spacing:.02em}
.lane .nd{border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px;background:var(--surface);margin-bottom:8px;cursor:pointer;font-size:12px;line-height:1.4;transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.lane .nd:hover{border-color:var(--navy-300);box-shadow:var(--sh)}
.lane .nd b{display:block;font-family:var(--font-mono);font-size:11px;color:var(--navy-700);font-weight:800}
.lane .nd small{color:var(--muted);font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lane .nd.miss{border-style:dashed;border-color:var(--err-bd);background:var(--err-bg)}
.lane .nd.miss b{color:var(--err)}

/* 커버리지 매트릭스 */
.cov{display:grid;gap:4px}
.cov .r{display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:center}
.cov .rc{display:flex;gap:4px;flex-wrap:wrap}

/* diff — 추가·삭제·수정 3색은 두 테마 공통이다 */
.diff{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;font-family:var(--font-mono);font-size:12px;line-height:1.75}
.diff .dh{background:var(--canvas);padding:8px 12px;border-bottom:1px solid var(--line);font-family:Pretendard,sans-serif;font-size:12px;font-weight:700;color:var(--muted);display:flex;gap:8px;align-items:center}
.diff .dl{display:flex;gap:0;border-bottom:1px solid var(--line-2)}
.diff .dl:last-child{border-bottom:none}
.diff .dn{width:44px;flex:0 0 44px;text-align:right;padding:4px 8px;color:var(--faint);background:var(--th-bg);font-size:11px;border-right:1px solid var(--line-2);user-select:none}
.diff .dt{padding:4px 12px;flex:1;min-width:0;white-space:pre-wrap;word-break:break-all}
.diff .add{background:#EAF7F0}.diff .add .dt{color:#0B6A48}.diff .add .dn{background:#DBF0E5}
.diff .del{background:#FDEEEC}.diff .del .dt{color:#A82820;text-decoration:line-through;opacity:.8}.diff .del .dn{background:#F8DDDA}
.diff .mod{background:#FFF8EA}.diff .mod .dt{color:#8A5A00}.diff .mod .dn{background:#FCEECD}
.diff mark{background:var(--mark-bg);color:inherit;padding:0 1px;border-radius:var(--radius-xs)}
.diff mark.d{background:var(--mark-del);text-decoration:line-through}

/* 검증 결과 항목 */
.vitem{display:flex;gap:12px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:8px;align-items:flex-start}
.vitem.er{border-color:var(--err-bd);background:var(--err-bg)}
.vitem.wn{border-color:var(--warn-bd);background:var(--warn-bg)}
.vitem.ok{border-color:var(--ok-bd);background:var(--ok-bg)}
.vitem .vi{width:24px;height:24px;border-radius:var(--radius-sm);display:grid;place-items:center;flex:0 0 auto;margin-top:1px;background:var(--idle-bg);color:var(--ink-2)}
.vitem.er .vi{background:var(--err);color:var(--text-inverse)}.vitem.wn .vi{background:var(--warn);color:var(--text-inverse)}.vitem.ok .vi{background:var(--ok);color:var(--text-inverse)}
.vitem .vi .ic{width:15px;height:15px;vertical-align:0}
.vitem .vb{flex:1;min-width:0}
.vitem .vb b{font-size:13px;font-weight:700;display:block;margin-bottom:2px}
.vitem .vb p{font-size:12px;color:var(--muted);line-height:1.55}
.vitem .va{flex:0 0 auto;display:grid;grid-template-columns:auto 148px;gap:8px;align-items:center}
.vitem .va:has(>:only-child){grid-template-columns:auto}
.vitem .va .btn.pri{min-width:0;width:100%}

/* 단계 스테퍼 */
.stp{display:flex;gap:0;margin-bottom:16px}
.stp .s{flex:1;position:relative;padding:0 4px}
.stp .s .bx{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:12px;height:100%}
.stp .s.on .bx{border-color:var(--hi);background:var(--hi-bg);box-shadow:0 0 0 3px var(--accent-glow)}
.stp .s.dn .bx{border-color:var(--ok-bd);background:var(--ok-bg)}
.stp .s .no{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--idle-bg);color:var(--muted);font-size:11px;font-weight:800;margin-right:8px;vertical-align:-4px}
.stp .s.on .no{background:var(--hi-ink);color:var(--text-inverse)}
.stp .s.dn .no{background:var(--ok);color:var(--text-inverse)}
.stp .s .no .ic{width:12px;height:12px;vertical-align:0}
.stp .s b{font-size:13px;font-weight:700}
.stp .s small{display:block;font-size:12px;color:var(--muted);margin-top:4px;padding-left:28px;line-height:1.45}

/* 게이지 */
.hl{background:linear-gradient(transparent 62%,var(--mark-bg) 62%);font-weight:600}
.dl2{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:13px}
.dl2 dt{color:var(--muted);font-weight:600;white-space:nowrap}
.mini{font-size:12px;color:var(--muted)}
.bq{border-left:3px solid var(--navy-300);padding:8px 0 8px 12px;font-size:13px;color:var(--ink-2);background:var(--ft-bg);line-height:1.75}

/* ── 로딩 스켈레톤 ── */
@keyframes skw{from{background-position:100% 50%}to{background-position:0 50%}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .cell:hover,.cvcell:hover{transform:none}
}

/* 대시보드 3카드 표 — 이름·부제를 한 줄로 잘라 행 높이를 고르게 한다 */
table.tb td.el{max-width:0}
table.tb td.el>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
table.tb td.el>.t{font-size:13px;font-weight:600}
/* ── 파이프라인 보드(에이전트 노드 그래프) — 설계 §2 화면 · §3 공통 컴포넌트 ── */
.agent{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--idle);
  border-radius:var(--r);padding:9px 11px 8px;display:flex;flex-direction:column;gap:4px;min-width:0;
  box-shadow:var(--shadow-xs);transition:box-shadow var(--duration-fast) var(--ease-standard)}
.agent>b{font-size:13px;font-weight:700;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.agent.ok{border-left-color:var(--ok)}
.agent.warn{border-left-color:var(--warn)}
.agent.err{border-left-color:var(--err)}
.agent.skip{opacity:.56}
.agent.run{border-left-color:var(--info);animation:pipepulse 1.6s var(--ease-standard) infinite}
@keyframes pipepulse{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 5px var(--accent-glow)}}
@media(prefers-reduced-motion:reduce){.agent.run{animation:none;box-shadow:0 0 0 3px var(--accent-glow)}}
/* 산출물 미리보기 모달(미리보기 설계 2026-09-14 · 화면) */
.pvbar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.pvdoc{display:block;width:100%;height:560px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.pvfrag{height:560px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--canvas);padding:12px}
.pvfrag .doc{border:0;padding:16px 20px}
.pvpages{position:relative;height:560px;overflow:auto;border:1px solid var(--line);
  border-radius:var(--r);background:var(--canvas);padding:10px}
.pvpages img{display:block;width:100%;margin:0 0 10px;border:1px solid var(--line);background:#fff}
.pvpages img:last-child{margin-bottom:0}
.pvtext{height:560px;overflow:auto;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);padding:12px 14px;white-space:pre-wrap;font-size:12px;line-height:1.8}
.pvslot{border:1px solid var(--line);border-radius:7px;padding:8px 10px}
.pvslot .ss{font-size:12px;color:var(--navy-500);margin-top:3px}

/* 형태 비교 모달 — 차이 표와 쪽 미리보기를 나란히(설계 2026-09-16 §7.6 B) */
.fcmp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:14px;padding-bottom:16px;align-items:start}
.fcmp .tbwrap.sc{max-height:330px}
.fcrow{cursor:pointer}
.fcrow.on{background:var(--mark-bg)}
.fcdet{border-top:1px solid var(--line-2);padding:10px 14px;line-height:1.7;word-break:break-all}
.fcdet b{color:var(--navy-700)}
.fcsam{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.fcsam .fcs{border:1px solid var(--line);border-radius:7px;padding:7px 9px;display:grid;gap:2px}
.fcsam .fcs b{font-size:12px}
.fcsam .fcs .df{color:var(--err);font-weight:700}
@media(max-width:1100px){.fcmp{grid-template-columns:1fr}}