/* 인허가 자동화 플랫폼 목업 — ra.js 의 증거 토큰 · 전용 블록 · 창. shell.css · mock.css 위에 얹는다.
 * 색은 세 경계를 따른다 — 파랑 결정론(엔진 · 규칙), 주황 AI 제안, 초록 사람의 판단. 빨강은 차단.
 */
@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: url("fonts/Pretendard-Regular.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 500; font-display: swap; src: url("fonts/Pretendard-Medium.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; src: url("fonts/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Pretendard"; font-weight: 700 900; font-display: swap; src: url("fonts/Pretendard-Bold.woff2") format("woff2"); }

:root {
  --det: #1c5aa6; --det-bg: #eaf1fb; --det-bd: #b9cff0;
  --llm: #a15c07; --llm-bg: #fdf3e1; --llm-bd: #f0d29b;
  --hum: #1d7a3e; --hum-bg: #e8f5ec; --hum-bd: #b5dfc3;
  --blk: #b42318; --blk-bg: #fdecea; --blk-bd: #f5c2bd;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

.mono { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }
/* blocks.js 의 콜아웃은 블록 제목과 같은 제목을 안에 한 번 더 쓴다 — 바깥 것을 숨긴다 */
.blk > .blk-t:has(+ .callout) { display: none; }
/* shell.css 는 콜아웃 안의 b 를 모두 제목으로 친다 — 본문의 굵은 글자는 줄 안에 둔다 */
.callout p b { display: inline; margin: 0; font-size: inherit; color: var(--text-1); }
.kpis { grid-template-columns: repeat(auto-fit, minmax(124px, 1fr)); }
.mut { color: var(--text-3); }
.ra-note { margin-top: 8px; font-size: 10.5px; color: var(--text-3); line-height: 1.65; }
.b-cap { margin-top: 6px; font-size: 10.5px; color: var(--text-3); line-height: 1.6; }
.fmt { display: inline-block; min-width: 34px; margin-right: 6px; padding: 0 4px; border: 1px solid var(--border-2); border-radius: 3px; background: var(--bg-subtle); font-size: 9px; font-weight: 750; line-height: 15px; color: var(--text-2); text-align: center; letter-spacing: .02em; vertical-align: 1px; }

/* ---------- 증거 토큰 ---------- */
.tok { display: inline; margin: 0 1px; padding: 0 3px; border-radius: 3px; border-bottom: 1.5px solid #8fb0e0; background: #eaf1fb; color: #123f7a; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer; transition: background .12s, color .12s; }
.tok:hover, .tok.hl { background: #ffe8a3; border-bottom-color: #e0a800; color: #5a3b00; }
.tok.pin { background: #ffe08a; box-shadow: 0 0 0 2px #f0b400; color: #3d2a00; }
.tok:focus-visible { outline: 2px solid var(--det); outline-offset: 1px; }
.tok.bad { background: var(--blk-bg); border-bottom-color: var(--blk); color: var(--blk); }
.beat.me .tok { background: rgba(255, 255, 255, .2); border-bottom-color: rgba(255, 255, 255, .6); color: #fff; }
.kpi .v .tok { padding: 0 4px; border-bottom-width: 2px; }

/* ---------- 비트 — 경계 표지 · 링크 ---------- */
.beat.log .bb { display: block; position: relative; padding-left: 24px; }
.beat.log .bb::before { position: absolute; left: 9px; top: 4px; }
.beat.done .bb { display: block; }
.ra-tag { display: inline-block; margin-right: 4px; padding: 0 6px; border-radius: 3px; font-size: 9.5px; font-weight: 750; line-height: 16px; white-space: nowrap; vertical-align: 1px; }
.ra-tag.det { background: var(--det-bg); color: var(--det); }
.ra-tag.llm { background: var(--llm-bg); color: var(--llm); }
.ra-tag.human { background: var(--hum-bg); color: var(--hum); }
.ra-tag.block { background: var(--blk-bg); color: var(--blk); }
.ra-ln { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--det); text-decoration: underline; text-decoration-color: #9db8e2; text-underline-offset: 2px; cursor: pointer; }
.ra-ln:hover { color: #123f7a; text-decoration-color: currentColor; }
.beat.log .ra-ln { font-weight: 600; }

/* ---------- 조항 · 선례 · 증거 칩 ---------- */
.cl { display: inline-flex; align-items: center; gap: 4px; margin: 1px 3px 1px 0; padding: 0 7px; border: 1px solid var(--border-2); border-radius: 4px; background: #fff; font: inherit; font-size: 10.5px; font-weight: 650; line-height: 19px; color: var(--text-1); white-space: nowrap; cursor: pointer; vertical-align: 1px; }
.cl::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 2px; background: var(--text-3); }
.cl[data-j="식약처"]::before { background: #1c5aa6; }
.cl[data-j="EU IVDR"]::before { background: #3f51b5; }
.cl[data-j="Team-NB"]::before { background: #8a94d8; }
.cl[data-j="씨젠 SOP"]::before { background: #0f8a7e; }
.cl.pr::before { background: var(--llm); border-radius: 50%; }
.cl.ev::before { background: var(--det); border-radius: 50%; }
.cl:hover { border-color: var(--accent-border); background: var(--accent-subtle); }

/* ---------- 세 경계 레인 ---------- */
.ra-bound { display: flex; align-items: stretch; gap: 6px; }
.ra-bound .bl { flex: 1 1 0; min-width: 0; padding: 9px 11px; border: 1px solid var(--border-2); border-radius: var(--r-8); background: #fff; }
.ra-bound .ba { flex: 0 0 auto; align-self: center; font-size: 12px; color: var(--text-3); }
.bl[data-b="det"] { border-color: var(--det-bd); background: var(--det-bg); }
.bl[data-b="llm"] { border-color: var(--llm-bd); background: var(--llm-bg); }
.bl[data-b="human"] { border-color: var(--hum-bd); background: var(--hum-bg); }
.bl[data-b="block"] { border-color: var(--blk-bd); background: var(--blk-bg); }
.bl .bk { margin-bottom: 3px; font-size: 10.5px; font-weight: 750; color: var(--text-2); }
.bl[data-b="det"] .bk { color: var(--det); }
.bl[data-b="llm"] .bk { color: var(--llm); }
.bl[data-b="human"] .bk { color: var(--hum); }
.bl[data-b="block"] .bk { color: var(--blk); }
.bl .bd { font-size: 11.5px; line-height: 1.6; color: var(--text-1); }
.ra-wsb .bl .bd { font-size: 11px; color: var(--text-2); }

/* ---------- 1단계 · 2단계 ---------- */
.ra-files td { font-size: 11.5px; overflow-wrap: anywhere; }
.ra-files .g { font-size: 10.5px; color: var(--text-3); white-space: nowrap; }
.ra-files .e { font-size: 10.5px; color: var(--text-2); }
.ra-files .mono { white-space: nowrap; color: var(--text-2); }
.ra-spec .sp-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 6px; font-size: 11px; color: var(--text-2); }
.ra-spec .sp-h b { font-size: 12px; color: var(--text-1); }
.ra-spec .sp-h .pill { margin-left: auto; }
.ra-spec td { font-size: 11.5px; }
.ra-spec td.k { width: 72px; font-weight: 650; color: var(--text-2); white-space: nowrap; }

/* 판독 SW 내보내기 시트 — 스프레드시트 모양 */
.sh-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; margin-bottom: 6px; font-size: 11px; color: var(--text-2); }
.sh-wrap { overflow: auto; border: 1px solid var(--border-2); border-radius: 4px; background: #fff; }
.sh { width: 100%; border-collapse: collapse; font-family: Calibri, "Segoe UI", Arial, Pretendard, sans-serif; }
.sh th, .sh td { height: 21px; padding: 1px 8px; border: 1px solid #e3e3e8; font-size: 11px; line-height: 17px; white-space: nowrap; }
.sh thead th { position: sticky; top: 0; z-index: 2; background: #f0f0f3; font-weight: 600; color: var(--text-3); text-align: center; }
.sh tbody th { position: sticky; left: 0; z-index: 1; width: 42px; background: #f6f6f8; font-weight: 500; color: var(--text-3); text-align: right; }
.sh tr.hdr td { background: #fafafb; font-weight: 700; color: var(--text-1); }
.sh td.cq { text-align: right; font-variant-numeric: tabular-nums; }
.sh tr.use td { background: #f2f7fe; }
.sh tr.lvl td { background: #dde9fb; }
.sh tr.ctl td { background: #f5f0ff; }
.sh tr.miss td.cq { background: #fff2d6; box-shadow: inset 0 0 0 1.5px #e7a400; }
.sh tr.ex td { color: #a5a5b0; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .18); }
.sh tr.focus td { background: #fff1ef; }
.sh tr.focus td.cq, .sh td.fc { background: #fff4f2; box-shadow: inset 0 0 0 2px #d23b2b; font-weight: 750; color: var(--blk); }
.sh tbody tr[data-ra] { cursor: pointer; }
.sh tbody tr[data-ra]:hover td { background: #fff7d6; }
.sh tr.sel td { background: #ffe8a3 !important; }
.sh tr.sel th { background: #f0c64a; color: #3d2a00; }
.sh-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 7px; padding: 8px 10px; border: 1px solid var(--blk-bd); border-radius: 6px; background: #fff6f4; font-size: 11.5px; line-height: 1.65; color: var(--text-1); }
.sh-note .fcm { flex: 0 0 auto; font-family: var(--mono); font-weight: 750; color: var(--blk); }
.sh-act { margin-top: 6px; font-size: 11.5px; text-align: right; }

/* ---------- 3단계 — 런 · 처분 · 영향 ---------- */
.ra-runs th, .ra-runs td { padding: 5px 7px; font-size: 11px; white-space: nowrap; }
.ra-runs th { vertical-align: bottom; }
.ra-runs th.grp { padding-bottom: 3px; border-bottom: 1px solid var(--border-2); text-align: center; }
.ra-runs tr.bad td { background: #fff6f5; }
.ra-runs td.out { font-weight: 750; color: var(--blk); }
.ra-runs td.out .ra-ln { color: var(--blk); text-decoration-color: #e8a29a; }
.ra-runs .why { margin-top: 2px; font-size: 9.5px; color: var(--blk); white-space: nowrap; }
.ra-disp { padding: 11px 12px; border: 1px solid var(--border-1); border-radius: var(--r-8); background: #fff; }
.ra-disp .dp-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 8px; font-size: 11.5px; color: var(--text-2); }
.ra-disp .dp-h b { font-size: 12.5px; color: var(--text-1); }
.ra-disp .dp-h .pill { margin-left: auto; }
.ra-disp .dp-f { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 11px; color: var(--text-2); }
.ra-disp .dp-f .ra-ln { margin-left: auto; }
.ra-wi td { font-size: 11.5px; }
.ra-rc { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px; }
.rc-out, .rt-out { font-size: 10.5px; line-height: 1.5; color: var(--text-3); }
.rc-out.ok, .rt-out.ok { font-weight: 650; color: var(--hum); }
.rc-out.bad, .rt-out.bad { font-weight: 650; color: var(--blk); }

/* ---------- 4단계 — probit ---------- */
.ra-pr .pr-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ra-pr .pr-mat { margin-left: auto; font-size: 10.5px; color: var(--text-3); }
.ra-pr .pr-g { padding: 6px 8px 2px; border: 1px solid var(--border-1); border-radius: var(--r-8); background: #fff; }
.ra-psvg { display: block; width: 100%; height: auto; }
.ra-psvg .pg { stroke: #eef0f4; }
.ra-psvg .pt { font-family: inherit; font-size: 10px; fill: var(--text-3); }
.ra-psvg .pci { fill: rgba(28, 90, 166, .08); }
.ra-psvg .p95 { stroke: #c2410c; stroke-width: 1; stroke-dasharray: 4 3; }
.ra-psvg .p95t { font-weight: 650; fill: #c2410c; }
.ra-psvg .pcv { fill: none; stroke: var(--det); stroke-width: 2; }
.ra-psvg .plod { stroke: var(--det); stroke-width: 1.2; stroke-dasharray: 2 3; }
.ra-psvg .plodt { font-size: 11px; font-weight: 750; fill: var(--det); }
.ra-psvg .pp { fill: #fff; stroke: var(--det); stroke-width: 1.8; }
.ra-psvg .pp.claim { fill: var(--det); }
.ra-psvg .pn { font-weight: 650; fill: var(--text-2); }
.ra-psvg .pax { stroke: var(--border-3); }
.ra-psvg .pxl { fill: var(--text-3); }
.ra-pr .pr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 10px; align-items: start; }
.pr-t th, .pr-t td { padding: 5px 8px; font-size: 11px; }
.pr-res { padding: 10px 12px; border: 1px solid var(--border-1); border-radius: var(--r-8); background: #fff; font-size: 11.5px; }
.pr-res .r1 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pr-res .r1 .k { font-size: 11px; font-weight: 650; color: var(--text-3); }
.pr-res .r1 .v .tok { font-size: 22px; font-weight: 750; }
.pr-res .r2 { margin: 3px 0; line-height: 1.85; }
.pr-res .r2 .k { display: inline-block; min-width: 70px; font-size: 10.5px; font-weight: 650; color: var(--text-3); }
.pr-res .u { font-size: 10.5px; color: var(--text-3); }
.pr-res .hash { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--border-2); font-size: 10.5px; color: var(--text-2); overflow-wrap: anywhere; }

/* ---------- 5단계 — 요구 매트릭스 · 표기 충돌 ---------- */
.ra-mx th, .ra-mx td { padding: 6px 7px; font-size: 11px; }
.ra-mx td:first-child { min-width: 104px; }
.ra-mx .sg { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
.ra-mx .sg span { padding: 0 4px; border-radius: 3px; background: var(--bg-subtle); font-size: 9px; font-weight: 650; color: var(--text-3); }
.ra-mx .evc { display: block; font-size: 10.5px; line-height: 1.9; color: var(--text-2); white-space: nowrap; }
.ra-mx .why { margin-top: 3px; font-size: 10px; line-height: 1.5; color: var(--text-2); }
.ra-cf .cf-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin-bottom: 8px; }
.ra-cf .cf-c { padding: 9px 11px; border: 1px solid var(--border-1); border-radius: var(--r-8); background: #fff; }
.cf-k { margin-bottom: 4px; font-size: 10px; font-weight: 700; color: var(--text-3); }
.ra-cf q { display: block; margin-top: 5px; font-size: 11px; line-height: 1.6; color: var(--text-2); quotes: "“" "”"; }
.ra-cf .cf-vs { align-self: center; font-size: 16px; color: var(--text-3); }
.cf-out { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cf-o { padding: 9px 11px; border: 1px solid var(--det-bd); border-radius: var(--r-8); background: #fff; font-size: 11.5px; line-height: 1.85; }

/* ---------- 6단계 — 문서 작업대 ---------- */
.ra-dw-h { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.ra-dw-h .btn { margin-left: auto; }
.ra-dw { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px; align-items: start; }
.ra-toc { padding: 8px 6px; border: 1px solid var(--border-1); border-radius: var(--r-8); background: #fff; font-size: 10.5px; }
.toc-h { padding: 0 6px 6px; font-size: 10px; font-weight: 700; color: var(--text-3); }
.toc-i { display: flex; align-items: center; gap: 5px; padding: 3px 6px; border-radius: 4px; line-height: 1.4; color: var(--text-2); }
.toc-i.l1 { padding-left: 13px; }
.toc-i.l2 { padding-left: 20px; }
.toc-i .no { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--text-3); }
.toc-i .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toc-i .pill { flex: 0 0 auto; padding: 0 5px; font-size: 8.5px; }
.toc-i.go { background: var(--accent-subtle); font-weight: 650; color: var(--text-1); cursor: pointer; }
.toc-i.go:hover { background: #dce7fa; }
.toc-f { margin-top: 6px; padding: 6px 6px 0; border-top: 1px solid var(--border-1); font-size: 9.5px; line-height: 1.5; color: var(--text-3); }
.ra-dw-b { max-height: 640px; overflow: auto; padding: 12px; border-radius: var(--r-8); background: #e9eaee; }
.ra-page { padding: 22px 26px 24px; border-radius: 2px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.ra-page + .ra-page { margin-top: 0; }
.ra-page[lang="en"] { font-family: Calibri, Carlito, "Segoe UI", Arial, Pretendard, sans-serif; }
.pg-h { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-2); font-family: Pretendard, sans-serif; font-size: 10px; color: var(--text-3); }
.pg-h b { font-weight: 650; color: var(--text-2); overflow-wrap: anywhere; }
.pg-h span:last-child { margin-left: auto; white-space: nowrap; }
.ds { margin-bottom: 14px; border-radius: 4px; scroll-margin-top: 8px; }
.ds.flash { animation: raflash 1.3s ease; }
@keyframes raflash { 0% { background: #fff1b8; } 100% { background: transparent; } }
.ds-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 8px; }
.ds-h h3 { font-size: 13.5px; font-weight: 750; color: var(--text-1); }
.ds-cl { display: inline-flex; flex-wrap: wrap; gap: 2px; font-family: Pretendard, sans-serif; }
.dp { position: relative; margin: 0 0 9px; padding: 2px 0 2px 10px; border-left: 3px solid transparent; }
.dp[data-slot="basis"] { border-left-color: #c9c9d2; }
.dp[data-slot="result"] { border-left-color: var(--det); }
.dp[data-slot="disc"][data-st="ok"] { border-left-color: var(--hum); }
.dp[data-slot="disc"][data-st="wait"] { border-left-color: #e0a14a; background: #fffaf0; }
.dp[data-slot="na"] { border-left: 3px dashed var(--hum); }
.dp-k { margin-bottom: 2px; font-family: Pretendard, sans-serif; font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--text-3); }
.dp[data-st="wait"] .dp-k { color: var(--llm); }
.dp p { font-size: 12px; line-height: 1.85; color: var(--text-1); word-break: keep-all; overflow-wrap: anywhere; }
.ra-page[lang="en"] .dp p { word-break: normal; font-size: 12.5px; line-height: 1.7; }
.ed { border-bottom: 1.5px dotted var(--hum); background: #eef8f1; cursor: help; }
.dcap { margin-bottom: 4px; font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.dt { width: 100%; border-collapse: collapse; font-size: 11px; }
.dt th, .dt td { padding: 4px 8px; border: 1px solid #c9c9d2; text-align: center; }
.dt th { background: #f1f2f5; font-weight: 650; }
.ra-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; font-size: 10px; color: var(--text-2); }
.ra-lg > span { display: inline-flex; align-items: center; gap: 4px; }
.ra-lg i.tk { padding: 0 3px; border-radius: 3px; border-bottom: 1.5px solid #8fb0e0; background: #eaf1fb; font-style: normal; font-weight: 650; color: #123f7a; }
.ra-lg i.sw { display: inline-block; width: 3px; height: 12px; border-radius: 1px; }
.ra-lg i.sw.basis { background: #c9c9d2; }
.ra-lg i.sw.result { background: var(--det); }
.ra-lg i.sw.ok { background: var(--hum); }
.ra-lg i.sw.wait { background: #e0a14a; }
.ra-lg i.sw.na { width: 0; border-left: 3px dashed var(--hum); }

/* ---------- 7단계 — 숫자 감사 · 사전 심사 ---------- */
.ra-au .au-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 11px 14px; border: 1px solid; border-radius: var(--r-8); }
.ra-au .au-top.ok { border-color: var(--hum-bd); background: var(--hum-bg); }
.ra-au .au-top.bad { border-color: var(--blk-bd); background: var(--blk-bg); }
.au-v { font-size: 15px; font-weight: 800; }
.au-top.ok .au-v { color: var(--hum); }
.au-top.bad .au-v { color: var(--blk); }
.au-n { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--text-1); }
.au-scope { margin: 7px 0 9px; font-size: 10.5px; line-height: 1.6; color: var(--text-3); }
.au-mut { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.au-mut .k { margin-right: 3px; font-size: 10.5px; font-weight: 700; color: var(--text-2); }
.au-why { margin-top: 9px; font-size: 11.5px; line-height: 1.65; color: var(--text-1); }
.au-i { margin-top: 7px; padding: 8px 11px; border: 1px solid var(--blk-bd); border-radius: 6px; background: #fff; }
.au-ih { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 11px; }
.au-i .ctx { margin-top: 5px; font-size: 11.5px; line-height: 1.7; color: var(--text-2); }
.au-i .ctx mark { padding: 0 2px; border-radius: 2px; background: #ffd9d4; font-weight: 750; color: var(--blk); }
.au-rules { margin-top: 9px; font-size: 10.5px; color: var(--text-2); }
.au-rules summary { font-weight: 650; cursor: pointer; }
.au-rules .ar { display: inline-block; margin: 5px 6px 0 0; padding: 1px 7px; border-radius: 4px; background: var(--bg-subtle); }
.ra-fd { display: grid; gap: 7px; }
.fd { padding: 9px 12px; border: 1px solid var(--border-1); border-left: 3px solid var(--border-3); border-radius: 6px; background: #fff; }
.fd[data-sev="bad"] { border-left-color: var(--blk); }
.fd[data-sev="warn"] { border-left-color: #d08700; }
.fd[data-sev="ok"] { border-left-color: var(--hum); }
.fd-h { display: flex; align-items: center; gap: 8px; }
.fd-h b { font-size: 12px; }
.fd p { margin: 5px 0 6px; font-size: 11.5px; line-height: 1.7; color: var(--text-1); }
.fd-r, .fd-a { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 6px; margin-top: 3px; font-size: 11px; }
.fd .k { flex: 0 0 auto; min-width: 26px; font-size: 10px; font-weight: 700; color: var(--text-3); }
.ra-act td, .ra-ch td { font-size: 11.5px; }
.ra-act .mut { margin-top: 2px; font-size: 11px; }
.ra-ch td.mono { font-size: 10.5px; color: var(--text-2); white-space: nowrap; }

/* ---------- 창 ---------- */
#raLayer { display: none; }
#raLayer.on { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; }
.ra-mask { position: absolute; inset: 0; background: rgba(18, 22, 33, .46); }
.ra-modal { position: relative; display: flex; flex-direction: column; width: min(1240px, 96vw); max-height: 90vh; overflow: hidden; border-radius: 10px; background: var(--bg-app); box-shadow: var(--sh-3); }
.ra-modal.ra-tr, .ra-modal.ra-sbs { height: 90vh; }
.ra-modal.ra-cl { width: min(720px, 94vw); }
.ra-modal.ra-dm { width: min(860px, 94vw); }
.ra-modal.ra-aum { width: min(880px, 94vw); }
.rm-h { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-1); background: #fff; }
.rm-t { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: 13px; }
.rm-t b { font-weight: 750; }
.rm-k { align-self: center; padding: 1px 6px; border-radius: 3px; background: var(--det); font-size: 10px; font-weight: 750; color: #fff; }
.rm-t .tv { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; color: #123f7a; }
.rm-t .tv small { font-size: 11px; font-weight: 600; color: var(--text-2); }
.rm-t .mono { font-size: 11px; color: var(--text-3); }
.rm-x { flex: 0 0 auto; width: 28px; height: 28px; margin-left: auto; border: 0; border-radius: 6px; background: transparent; font-size: 14px; color: var(--text-2); cursor: pointer; }
.rm-x:hover { background: var(--bg-hover); }
.rm-b { flex: 1; min-height: 0; overflow: auto; padding: 14px 16px 16px; }

/* 추적 뷰어 */
.ra-tr .rm-b { display: flex; overflow: hidden; }
.tr-g { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 14px; }
.tr-l { min-height: 0; overflow: auto; padding-right: 4px; }
.tr-r { min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.tr-r > .sh-wrap { flex: 0 1 auto; min-height: 120px; }
.tr-tabs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.tr-tabs .k { margin-right: 2px; font-size: 10.5px; font-weight: 700; color: var(--text-3); }
.tr-tabs .chip.ex { border-style: dashed; color: var(--text-3); }
.tr-tabs .chip.ex.on { border-color: var(--blk); background: var(--blk-bg); color: var(--blk); }
.tr-ban { padding: 6px 10px; border: 1px solid var(--blk-bd); border-radius: 6px; background: var(--blk-bg); font-size: 11px; color: var(--blk); }
.tr-info { flex: 0 0 auto; min-height: 58px; max-height: 170px; overflow: auto; padding: 8px 11px; border: 1px solid var(--border-2); border-radius: 6px; background: #fff; font-size: 11.5px; line-height: 1.6; color: var(--text-2); }
.ti-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; color: var(--text-1); }
.ti-h .mono { font-weight: 750; color: var(--det); }
.ti-u { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.ti-u .k { flex: 0 0 auto; font-size: 10px; font-weight: 700; color: var(--text-3); }
.ub { display: flex; flex-wrap: wrap; gap: 3px 8px; }
.ubc { font-size: 10.5px; color: var(--text-2); white-space: nowrap; }
.tr-lg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 10px; color: var(--text-3); }
.tr-lg span { display: inline-flex; align-items: center; gap: 4px; }
.tr-lg i { display: inline-block; width: 12px; height: 10px; border: 1px solid #d5d5dc; border-radius: 2px; }
.tr-lg i.use { background: #f2f7fe; }
.tr-lg i.lvl { background: #dde9fb; }
.tr-lg i.miss { border-color: #e7a400; background: #fff2d6; }
.tr-lg i.ctl { background: #f5f0ff; }
.tr-lg i.focus { border: 2px solid #d23b2b; background: #fff4f2; }
.tr-chain { display: flex; flex-direction: column; gap: 6px; }
.cn { position: relative; display: flex; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 7px; background: #fff; }
.cn[data-b="det"] { border-color: var(--det-bd); }
.cn[data-b="human"] { border-color: var(--hum-bd); background: #fbfefc; }
.cn[data-b="llm"] { border-color: var(--llm-bd); background: #fffcf6; }
.cn + .cn::before { content: ""; position: absolute; left: 17px; top: -7px; width: 2px; height: 6px; background: var(--border-3); }
.cn .n { flex: 0 0 auto; font-size: 15px; font-weight: 700; line-height: 1.1; color: var(--text-3); }
.cn[data-b="det"] .n, .cn[data-b="det"] .ct { color: var(--det); }
.cn[data-b="human"] .n, .cn[data-b="human"] .ct { color: var(--hum); }
.cn[data-b="llm"] .n, .cn[data-b="llm"] .ct { color: var(--llm); }
.cn .cb { flex: 1; min-width: 0; }
.cn .ct { margin-bottom: 2px; font-size: 10.5px; font-weight: 750; }
.cn .cd { font-size: 11.5px; line-height: 1.6; color: var(--text-1); overflow-wrap: anywhere; }
.cn .cd2 { font-size: 10.5px; color: var(--text-3); }
.cn .mono { color: var(--text-2); }
.cn .rt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 5px; }
.cn .cu { margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--border-2); }
.tr-req { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; margin-top: 10px; padding: 8px 10px; border-radius: 7px; background: var(--bg-subtle); font-size: 11px; }
.tr-req .k { margin-right: 4px; font-size: 10px; font-weight: 700; color: var(--text-3); }
.cl2 th, .cl2 td { font-size: 12px; }
.cl2 td.on { background: #dde9fb; font-weight: 750; color: #123f7a; }

/* 조항 · 선례 */
.cl-dl { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 5px 12px; margin-bottom: 10px; font-size: 11.5px; }
.cl-dl dt { font-weight: 650; color: var(--text-3); }
.cl-dl dd { line-height: 1.6; color: var(--text-1); }
.cl-q { margin: 10px 0; }
.cl-q .k, .cl-s .k { margin-bottom: 4px; font-size: 10px; font-weight: 700; color: var(--text-3); }
.cl-q blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--det); border-radius: 0 6px 6px 0; background: #fff; font-size: 12.5px; line-height: 1.8; color: var(--text-1); }
.cl-q blockquote[lang="en"] { font-family: Georgia, "Times New Roman", serif; font-size: 13px; }
.cl-q.gist p { padding: 9px 12px; border: 1px dashed var(--border-3); border-radius: 6px; font-size: 12px; line-height: 1.7; color: var(--text-2); }
.cl-s { margin-top: 10px; }
.cl-r { display: flex; align-items: center; gap: 7px; padding: 5px 0; border-bottom: 1px solid var(--border-1); font-size: 11.5px; }
.cl-s.here .cl-r { padding: 8px 10px; border: 1px solid var(--llm-bd); border-radius: 6px; background: var(--llm-bg); }
.stg { align-self: center; padding: 1px 7px; border-radius: 20px; background: var(--bg-subtle); font-size: 10px; font-weight: 700; color: var(--text-2); }
.stg[data-s="법정 필수"] { background: #e8eefb; color: #1c3f8a; }
.stg[data-s="지침 권고"] { background: #eef0fb; color: #4652a8; }
.stg[data-s="사내 SOP"] { background: #e6f5f3; color: #0f6e65; }

/* 나란히 보기 */
.ra-sbs .rm-b { background: #e9eaee; }
.sbs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }

/* 노트북 화면 — 4열 셸에서 캔버스가 450px 안팎으로 좁아진다 */
@media (max-width: 1500px) {
  .ra-blk > .rb-body { overflow-x: auto; }
  .paper { padding: 36px 28px 44px; }
  .ra-dw { grid-template-columns: minmax(0, 1fr); }
  .ra-toc { display: flex; gap: 4px; overflow-x: auto; padding: 5px; }
  .ra-toc .toc-h, .ra-toc .toc-f, .ra-toc .toc-i:not(.go) { display: none; }
  .ra-toc .toc-i.go { flex: 0 0 auto; padding-left: 6px; }
}

@media print {
  #raLayer { display: none !important; }
  .tok { padding: 0; border-bottom: 1px dotted #8fb0e0; background: none !important; color: inherit; }
}