/* ── 🤖 법령온톨로지기반 AI Agent — 3패널(추론 과정 · 지식그래프 · 대화) ── */
body.ontochat-mode #sidebar, body.ontochat-mode #composer-wrap, body.ontochat-mode #chat,
body.ontochat-mode #workbench, body.ontochat-mode #newlaw, body.ontochat-mode #admin,
body.ontochat-mode #axioms, body.ontochat-mode #labeling, body.ontochat-mode #queue{display:none}
body.ontochat-mode #ontochat{display:grid}
#ontochat{display:none; grid-template-columns:var(--oc-left-width,300px) 8px minmax(0,1fr) 8px var(--oc-right-width,420px);
  height:100%; overflow:hidden; background:var(--bg)}
#ocLeft, #ocCenter, #ocRight{display:flex; flex-direction:column; min-height:0; min-width:0}
#ocCenter{position:relative}
.oc-splitter{position:relative; cursor:col-resize; touch-action:none; background:var(--bg-side);
  border-inline:1px solid var(--line)}
.oc-splitter::after{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:3px; height:48px; border-radius:3px; background:var(--tx-faint)}
.oc-splitter:hover, .oc-splitter:focus-visible, .oc-splitter.is-dragging{background:var(--accent-soft)}
.oc-splitter:hover::after, .oc-splitter:focus-visible::after, .oc-splitter.is-dragging::after{background:var(--accent)}
.oc-splitter:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
body.oc-resizing, body.oc-resizing *{cursor:col-resize!important; user-select:none!important}
.oc-panel-h{flex:0 0 auto; display:flex; gap:8px; align-items:center;
  padding:10px 14px; border-bottom:1px solid var(--line); font-size:var(--font-size-base);
  font-weight:700; background:var(--bg-card)}
#ontochat .oc-panel-h{flex-wrap:wrap; min-width:0}
.oc-hcount{font-weight:400; font-size:var(--font-size-base); color:var(--tx-faint); margin-left:auto}
/* 그래프 표시 범위 토글 — 답변 근거 / 조회 전체 (사용자 요청 2026-09-04) */
.oc-seg{display:inline-flex; margin-left:10px; border:1px solid var(--line);
  border-radius:999px; overflow:hidden; background:transparent; flex:none}
.oc-seg button{border:0; background:none; font:inherit; font-size:var(--font-size-base); font-weight:600;
  line-height:1.5; padding:2px 10px; color:var(--tx-faint); cursor:pointer; white-space:nowrap}
.oc-seg button + button{border-left:1px solid var(--line)}
.oc-seg button:hover:not(.on):not(:disabled){background:var(--bg-hover); color:var(--tx)}
.oc-seg button.on{background:var(--accent); color:var(--accent-contrast)}
.oc-seg button:disabled{opacity:.4; cursor:not-allowed}
/* 좁은 폭 전환 탭 — 1100px 이하에서 세 패널을 한 번에 못 보여 주므로 탭으로 고른다.
   넓은 폭에서는 숨긴다(그리드 5칸에 6번째 자식이 끼어들지 않게 display:none 유지). */
#ocTabs{display:none; gap:6px; padding:8px 12px; border-bottom:1px solid var(--line);
  background:var(--bg-card)}
#ocTabs button{font:inherit; font-size:var(--font-size-base); padding:6px 14px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg); color:var(--tx-dim); cursor:pointer}
#ocTabs button[aria-selected="true"]{background:var(--accent); border-color:var(--accent);
  color:var(--accent-contrast); font-weight:700}
@media (max-width:1100px){
  #ontochat{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
  #ocTabs{display:flex}
  #ocLeft, #ocCenter, #ocRight, .oc-splitter{display:none}
  #ontochat[data-panel="ocLeft"] #ocLeft,
  #ontochat[data-panel="ocCenter"] #ocCenter,
  #ontochat[data-panel="ocRight"] #ocRight{display:flex}
}

/* 좌: 추론 과정 */
#ocSteps{flex:1; overflow-y:auto; padding:10px 12px; display:flex;
  flex-direction:column; gap:6px}
#ocStepsEmpty{margin:auto 0; text-align:center; color:var(--tx-faint);
  font-size:var(--font-size-base); line-height:1.8; padding:0 6px}
#ocStepsEmpty[hidden]{display:none}
/* 질문 한 건의 기록 묶음 — 칩 사이 간격을 패널(#ocSteps)과 같게 */
.oc-request-steps{display:flex; flex-direction:column; gap:6px}
.oc-request-steps > .oc-plan{margin:0}   /* 간격은 gap 이 맡는다 — 카드 여백까지 더하면 두 배로 벌어진다 */
.oc-qdiv{font-size:var(--font-size-base); color:var(--tx-faint); margin:8px 0 2px;
  border-top:1px dashed var(--line); padding-top:8px}
.oc-qdiv:first-child{border-top:0; margin-top:0; padding-top:0}
.oc-step{font-size:var(--font-size-base); border:1px solid var(--line); border-radius:8px;
  background:var(--bg-card)}
.oc-step summary{display:flex; gap:6px; align-items:center; padding:6px 9px;
  cursor:pointer; list-style:none}
/* 도구 칩만 줄을 바꾼다 — 결과 한 줄이 이름 아래 줄로 온다. 완료 표시·중간 메모(div.oc-step)는 한 줄 그대로 */
details.oc-step > summary{flex-wrap:wrap; gap:2px 6px}
.oc-step summary::-webkit-details-marker{display:none}
.oc-step .oc-tool{font-size:var(--font-size-base); color:var(--tx-faint)}
/* 도구 이름은 남는 폭만 쓴다 — 긴 이름 때문에 시간이 홀로 다음 줄로 밀리지 않게.
   다만 패널을 최소 폭(220px)까지 줄이면 이름이 두세 글자씩 쌓이므로 4em 아래로는 시간을 다음 줄로 보낸다 */
.oc-step .oc-sname{flex:1 1 4em; min-width:0; font-weight:600; color:var(--tx-dim); word-break:keep-all; overflow-wrap:anywhere}
.oc-step .oc-ms{margin-left:auto; font-size:var(--font-size-base); color:var(--tx-faint); white-space:nowrap}
/* 펼칠 수 있다는 표시 — 찾은 항목·기술 상세가 안에 있다 */
details.oc-step > summary::after{content:"▸"; order:1; color:var(--tx-faint)}
details.oc-step[open] > summary::after{content:"▾"}
/* 결과 한 줄(무엇을 찾았는지)이 칩의 본문이다 — summary 안에 있어 접혀 있어도 보인다.
   두 줄까지 보이고 전체 문장은 title 로도 붙인다(page.js tool_done). */
.oc-step .oc-sum{order:2; flex:1 0 100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  font-size:var(--font-size-base); color:var(--tx); line-height:1.5;
  overflow:hidden; white-space:normal; word-break:break-word}
.oc-step:not([data-done]) .oc-sum{color:var(--tx-faint)}
.oc-step .oc-sum.bad{color:var(--red)}
.oc-detail{padding:0 9px 8px}
/* 도구가 찾은 항목(tool_done.found) — 펼치면 기술 상세 위에 보인다 */
.oc-found{margin:2px 0 6px}
.oc-found-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px}
.oc-found-list li{display:flex; gap:6px; align-items:baseline; min-width:0; line-height:1.5}
.oc-fk{flex:none; font-size:calc(var(--font-size-base) - 1pt); font-weight:700; line-height:1.45;
  padding:0 6px; border:1px solid currentColor; border-radius:6px; white-space:nowrap;
  color:var(--tx-faint); background:var(--bg-chip)}
.oc-fk[data-kind="provision"]{color:var(--amber); background:color-mix(in srgb, var(--amber) 10%, transparent)}
.oc-fk[data-kind="penalty"]{color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent)}
.oc-fk[data-kind="knowledge"]{color:var(--src-k); background:color-mix(in srgb, var(--src-k) 10%, transparent)}
.oc-fk[data-kind="precedent"], .oc-fk[data-kind="inquiry"]{color:var(--src-q); background:color-mix(in srgb, var(--src-q) 10%, transparent)}
.oc-fk[data-kind="parameter"], .oc-fk[data-kind="formula"]{color:var(--blue); background:var(--blue-bg)}
.oc-fk[data-kind="domain"], .oc-fk[data-kind="concept"], .oc-fk[data-kind="rule"]{color:var(--accent); background:var(--accent-soft)}
.oc-fl{min-width:0; color:var(--tx); overflow-wrap:anywhere}
.oc-found-more{margin-top:2px; color:var(--tx-faint); font-size:var(--font-size-base)}
/* 원시 인자·관찰 JSON 은 운영자용 — 기본은 접어 둔다 */
.oc-tech > summary{cursor:pointer; color:var(--tx-faint); font-size:var(--font-size-base); padding:2px 0}
.oc-kv{display:flex; gap:8px; margin-top:4px}
.oc-kv span{flex:0 0 40px; font-size:var(--font-size-base); color:var(--tx-faint); padding-top:3px}
.oc-kv pre{flex:1; margin:0; font-size:var(--font-size-base); max-height:200px; overflow:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:6px;
  padding:6px 8px; white-space:pre-wrap; word-break:break-all}
.oc-step.oc-answer summary{color:var(--accent)}
.oc-step.oc-interim summary{color:var(--tx-faint); font-size:var(--font-size-base); font-weight:400}
/* 계획 카드 — 계획형 하네스의 목표·단계·이유·상태 */
.oc-plan{font-size:var(--font-size-base); border:1px solid var(--accent); border-radius:8px; padding:8px 10px;
  margin:6px 0; background:var(--accent-soft)}
.oc-plan-h{font-weight:700; margin-bottom:4px}
.oc-plan-steps{margin:0; padding-left:18px}
.oc-plan-steps li{margin:3px 0; line-height:1.5}
.oc-plan-ic{display:inline-block; width:1.3em}
.oc-plan-steps li[data-status="done"] .oc-plan-ic{color:var(--green)}
.oc-plan-steps li[data-status="empty"] .oc-plan-ic, .oc-plan-steps li[data-status="skipped"] .oc-plan-ic{color:var(--amber)}
.oc-plan-steps li[data-status="error"] .oc-plan-ic{color:var(--red)}
.oc-plan-args{color:var(--tx-dim); font-size:var(--font-size-base)}
.oc-plan-why{color:var(--tx-faint); font-size:var(--font-size-base)}
.oc-plan-note{color:var(--tx-faint); font-size:var(--font-size-base)}
.oc-plan-focus{margin-top:4px; font-size:var(--font-size-base); color:var(--tx-dim)}

/* 처리 시간 — 구간 종류 배지(LLM·JEV·온톨로지·서버). 검수 권한 화면에만 서버가 시간을 보낸다 */
.oc-tk{display:inline-block; flex:none; font-style:normal; font-size:calc(var(--font-size-base) - 1pt);
  font-weight:700; line-height:1.45; padding:0 6px; border:1px solid currentColor; border-radius:6px; white-space:nowrap}
.oc-tk.llm{color:var(--blue); background:var(--blue-bg)}
.oc-tk.jev{color:var(--src-q); background:color-mix(in srgb, var(--src-q) 12%, transparent)}
.oc-tk.tool{color:var(--green); background:color-mix(in srgb, var(--green) 10%, transparent)}
.oc-tk.server{color:var(--tx-faint); background:var(--bg-chip)}
/* 도구 칩의 배지는 시간을 받는 화면에서만 — 일반 사용자 화면은 그대로 */
.oc-step .oc-tk{display:none}
.oc-timed .oc-step .oc-tk{display:inline-block}
.oc-tchip{display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:6px; align-items:center;
  font-size:var(--font-size-base); padding:4px 9px; border:1px solid var(--line); border-left-width:3px;
  border-radius:8px; background:var(--bg-soft)}
.oc-tchip.llm{border-left-color:var(--blue)}
.oc-tchip.jev{border-left-color:var(--src-q)}
.oc-tchip.tool{border-left-color:var(--green)}
.oc-tchip.server{border-left-color:var(--tx-faint)}
.oc-tchip.bg{border-style:dashed}
.oc-tchip .oc-tlabel{min-width:0; font-weight:600; word-break:keep-all; overflow-wrap:anywhere}
.oc-tchip .oc-ms{white-space:nowrap; color:var(--tx-faint)}
/* LLM 구간이 무엇을 했는지(계획 N단계·추가 조회·인용·검증 결과) — 모델명보다 위에 */
.oc-tchip .oc-twhat{grid-column:2 / -1; min-width:0; color:var(--tx); overflow-wrap:anywhere}
.oc-tchip .oc-tsub{grid-column:2 / -1; min-width:0; color:var(--tx-faint);
  font-size:calc(var(--font-size-base) - 1pt); overflow-wrap:anywhere}
.oc-tchip[data-status="error"] .oc-ms, .oc-tchip[data-status="timeout"] .oc-ms{color:var(--red)}
/* 패널을 최소 폭 가까이 줄이면 '시간 초과 · 1.2초' 같은 시간 표시가 라벨 칸을 밀어 라벨이 한 글자씩
   세로로 쌓였다 — 좁을 때는 시간을 라벨 아래 줄로 내린다 */
#ocSteps{container-type:inline-size}
@container (max-width:250px){
  .oc-tchip .oc-ms{grid-column:2 / -1; grid-row:2}
}

/* 이번 질문에서 조회한 자료 전체 — 질문 기록 끝. 답변에 쓴 자료는 '답변에 사용' 표시 */
.oc-retrieved{font-size:var(--font-size-base); border:1px solid var(--line); border-radius:8px; background:var(--bg-card)}
/* 요약 줄은 글 흐름으로 둔다 — flex 로 두면 좁은 패널에서 ▸ 만 한 줄에 남고 글이 다음 줄로 밀렸다 */
.oc-retrieved > summary{display:block; padding:6px 9px 6px calc(9px + 1.1em); text-indent:-1.1em;
  cursor:pointer; list-style:none; font-weight:600; word-break:keep-all; overflow-wrap:anywhere}
.oc-retrieved > summary::-webkit-details-marker{display:none}
.oc-retrieved > summary::before{content:"▸"; display:inline-block; width:1.1em; text-indent:0; color:var(--tx-faint); font-weight:400}
.oc-retrieved[open] > summary::before{content:"▾"}
.oc-rused{font-weight:400; color:var(--tx-dim)}
.oc-rused::before{content:" · "}
.oc-rbody{padding:0 9px 8px; display:flex; flex-direction:column; gap:8px}
.oc-rgroup-h{color:var(--tx-faint); font-weight:600; margin-bottom:2px}
/* 자료 이름 뒤에 '답변에 사용' 표시가 글처럼 이어진다 — 좁으면 표시가 다음 줄로 내려가고 이름은 제 폭을 쓴다 */
.oc-ritem > summary{display:block; padding:2px 0 2px 1.1em; text-indent:-1.1em; cursor:pointer; list-style:none}
.oc-ritem > summary::-webkit-details-marker{display:none}
.oc-ritem > summary::before{content:"▸"; display:inline-block; width:1.1em; text-indent:0; color:var(--tx-faint)}
.oc-ritem[open] > summary::before{content:"▾"}
.oc-rlabel{word-break:keep-all; overflow-wrap:anywhere}
.oc-ritem:not([data-used]) .oc-rlabel{color:var(--tx-dim)}
.oc-rtag{display:inline-block; margin-left:6px; text-indent:0; font-size:calc(var(--font-size-base) - 1pt);
  font-weight:700; line-height:1.45; padding:0 6px; border:1px solid currentColor; border-radius:6px; white-space:nowrap;
  color:var(--green); background:color-mix(in srgb, var(--green) 10%, transparent)}
.oc-rex{margin:4px 0 6px; padding:6px 8px; max-height:180px; overflow:auto; background:var(--bg);
  border:1px solid var(--line); border-radius:6px; color:var(--tx-dim); white-space:pre-wrap; overflow-wrap:anywhere}
.oc-rex.oc-rnone{color:var(--tx-faint)}

/* 중앙: d3 지식그래프 */
#ocGraphWrap{flex:1; position:relative; min-height:0; display:flex; container-type:inline-size}
#ocNormHint{margin:0; padding:10px 14px; background:var(--bg-soft); border-bottom:1px solid var(--line);
  color:var(--tx-dim); font-size:var(--font-size-base); line-height:1.65}
#ocCenter:has(#ocNodeCard:not([hidden])) > #ocNormHint{display:none}
#ocGraph g.n:focus-visible circle.c{stroke:var(--accent); stroke-width:4px}
#ocGraph{flex:1; min-width:0; height:100%; display:block; cursor:grab}
#ocGraph:active{cursor:grabbing}
#ocGraphEmpty{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; text-align:center; color:var(--tx-faint);
  font-size:var(--font-size-base); pointer-events:none; padding:0 30px; line-height:1.8}
#ocLegend{flex:0 0 auto; display:flex; gap:12px; flex-wrap:wrap;
  padding:9px 14px; border-top:1px solid var(--line); font-size:var(--font-size-base);
  color:var(--tx-dim); background:var(--bg-card)}
#ocLegend .lg{display:inline-flex; gap:5px; align-items:center}
#ocLegend .lg i{width:12px; height:12px; border-radius:50%; display:inline-block}
.oc-panel-h #ocFitBtn{margin-left:8px}
#ocLegend .lg svg{flex:none; display:block}
#ocLegend .lg-sep{width:1px; height:14px; background:var(--line); align-self:center}
#ocLegend label.lg{cursor:pointer}
#ocLegend label.lg input{margin:0 3px 0 0; accent-color:var(--accent)}
#ocFocusHint{color:var(--tx-faint)}
/* 연결선 범례는 접어 둔다 — 항목 18개가 상시 노출돼 그래프 높이를 서너 줄 잠식했다 */
#ocLegendMore{flex-basis:100%; margin:0}
#ocLegendMore > summary{cursor:pointer; color:var(--tx-dim); font-weight:600; list-style:none;
  display:inline-flex; align-items:center; gap:4px; padding:1px 0}
#ocLegendMore > summary::-webkit-details-marker{display:none}
#ocLegendMore > summary::before{content:"▸"; color:var(--tx-faint)}
#ocLegendMore[open] > summary::before{content:"▾"}
#ocLegendMore .lg-body{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:6px}
#ocLegend .lg-grp{font-weight:700; color:var(--tx-dim)}

/* 우: 대화 */
#ocMsgs{flex:1; overflow-y:auto; padding:14px 16px; display:flex;
  flex-direction:column; gap:12px}
#ocEmpty{margin:auto; text-align:center; color:var(--tx-faint); max-width:360px}
#ocEmpty h2{margin:0 0 6px; color:var(--tx); font-size:1.25em; font-weight:700}
#ocEmpty p{font-size:var(--font-size-base); line-height:1.8}
#ocStarters{display:flex; flex-direction:column; gap:8px; margin-top:14px}
.oc-starter{font:inherit; font-size:var(--font-size-base); text-align:left; padding:8px 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--bg-card);
  color:var(--tx); cursor:pointer}
.oc-starter:hover{border-color:var(--accent)}
.oc-turn{display:flex}
.oc-turn.oc-user{justify-content:flex-end}
.oc-turn .oc-bubble{max-width:92%; border-radius:13px; padding:10px 14px;
  font-size:var(--font-size-base); line-height:1.75}
.oc-user .oc-bubble{background:var(--accent); color:var(--accent-contrast);
  border-bottom-right-radius:4px; white-space:pre-wrap; word-break:break-word}
.oc-bot .oc-bubble{background:var(--bg-card); border:1px solid var(--line);
  border-bottom-left-radius:4px; width:92%}
.oc-text{white-space:pre-wrap; word-break:break-word}
/* 완료 후 마크다운 렌더 — pre-wrap 을 끄고 블록 요소로 조판한다 */
.oc-text.md{white-space:normal}
.oc-text.md .md-h{font-weight:700; font-size:var(--font-size-base); margin:10px 0 4px}
.oc-text.md .md-ul{margin:2px 0 6px; padding-left:20px}
.oc-text.md .md-ul li{margin:2px 0}
.oc-text.md .md-ol{margin:6px 0 2px}
.oc-text.md .md-gap{height:7px}
.oc-text.md .md-code{background:var(--bg-soft); border:1px solid var(--line);
  border-radius:4px; padding:0 4px; font-size:var(--font-size-base)}
.oc-text.md .md-cite{display:inline-block; font:inherit; font-size:var(--font-size-base); padding:0 6px;
  border-radius:8px; background:var(--bg-soft); border:1px solid var(--line);
  color:var(--tx-dim); margin:0 1px; cursor:pointer}
.oc-text.md .md-cite:hover{border-color:var(--accent); color:var(--accent)}
.oc-text.md .md-cite:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.oc-meta{font-size:var(--font-size-base); color:var(--tx-faint); margin-top:6px}

/* 답변에 사용된 자료 — 최종 답변이 실제로 쓴 자료만. 조회 자료 전체는 왼쪽 추론 과정 끝에 있다.
   늘 보이는 번호 목록 한 줄씩, 원문은 '원문' 단추로 높이가 제한된 상자에 연다(접힌 details 두 겹을 없앴다) */
.oc-answer-sources:empty{display:none}
.oc-refs-box{margin-top:10px; padding-top:8px; border-top:1px solid var(--line)}
.oc-refs-h{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; margin-bottom:4px; word-break:keep-all}
.oc-refs-h strong{font-weight:700; color:var(--tx)}
.oc-refs-count{color:var(--tx-dim)}
.oc-refs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.oc-ref{border-radius:8px; transition:background-color .3s, box-shadow .3s}
.oc-ref[hidden]{display:none}
.oc-ref.is-open{background:var(--bg-chip)}
.oc-ref.is-target{background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent)}
.oc-ref-head{display:flex; align-items:center; gap:6px; min-width:0; padding:3px 6px 3px 2px; line-height:1.5}
.oc-ref-no{flex:none; min-width:1.7em; text-align:right; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums}
.oc-ref-no::after{content:"."}
/* 자료명은 한 줄 — 음절 중간에서 끊지 않고 넘치면 말줄임, 전체 이름은 title 과 펼친 상자에 */
.oc-ref-label{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  word-break:keep-all; color:var(--tx)}
.oc-ref-toggle, .oc-refs-more, .oc-ref-graph{flex:none; font:inherit; font-size:calc(var(--font-size-base) - 1pt);
  line-height:1.5; padding:1px 9px; border:1px solid var(--line); border-radius:7px; background:var(--bg);
  color:var(--tx-dim); cursor:pointer; white-space:nowrap}
.oc-ref-toggle::after{content:" ▾"}
.oc-ref-toggle[aria-expanded="true"]{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.oc-ref-toggle[aria-expanded="true"]::after{content:" ▴"}
.oc-ref-toggle:hover, .oc-refs-more:hover, .oc-ref-graph:hover{border-color:var(--accent); color:var(--accent)}
.oc-ref-toggle:focus-visible, .oc-refs-more:focus-visible, .oc-ref-graph:focus-visible,
.oc-ref-law:focus-visible, .oc-cite-ref:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.oc-refs-more{margin:4px 0 0 calc(1.7em + 8px)}
.oc-refs-more[hidden]{display:none}
.oc-ref-body{margin:0 6px 8px calc(1.7em + 8px); min-width:0}
.oc-ref-body[hidden]{display:none}
.oc-ref-full{margin:2px 0 4px; color:var(--tx-dim); word-break:keep-all; overflow-wrap:anywhere}
.oc-ref-sub{margin:6px 0 3px; font-size:calc(var(--font-size-base) - 1pt); font-weight:700; color:var(--tx-faint)}
/* 원문 상자 — 추론 과정의 조회 자료 발췌(.oc-rex)와 같은 모양, 높이 제한 후 스크롤 */
.oc-ref-ex{position:relative; margin:0 0 6px; padding:6px 8px; max-height:180px; overflow:auto;
  background:var(--bg); border:1px solid var(--line); border-radius:6px; color:var(--tx-dim);
  line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere}
.oc-ref-ex.oc-rnone{color:var(--tx-faint)}
.oc-ref-seg + .oc-ref-seg{margin-top:6px; padding-top:6px; border-top:1px dashed var(--line)}
.oc-ref-hit{background:var(--accent-soft); color:var(--tx); border-radius:3px; padding:0 2px}
.oc-ref-claim{margin:0 0 4px; padding:4px 9px; border-left:3px solid var(--accent); border-radius:0 6px 6px 0;
  background:var(--bg); color:var(--tx); overflow-wrap:anywhere}
.oc-ref-claim .md-h{font-weight:700}
.oc-ref-claim .md-ul{margin:2px 0; padding-left:18px}
.oc-ref-claim .md-gap{height:4px}
.oc-ref-claim .md-cite{font:inherit; padding:0 5px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg-soft); color:var(--tx-dim); cursor:pointer}
.oc-ref-more{margin:0 0 6px}
.oc-ref-more > summary{cursor:pointer; color:var(--tx-faint); font-size:calc(var(--font-size-base) - 1pt); padding:1px 0}
.oc-ref-more[open] > summary{margin-bottom:3px}
.oc-ref-acts{display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin-top:2px}
.oc-ref-law{color:var(--accent); text-decoration:underline; text-underline-offset:2px; word-break:keep-all}
.oc-ref-law::after{content:" ↗"}
/* 좁은 화면(탭 배치)에서는 그래프가 다른 탭이라 '그래프에서 보기'를 두지 않는다 */
@media (max-width:1100px){ .oc-ref-graph{display:none} }

/* 답변 속 근거 번호 — 인용 표기 바로 뒤의 작은 번호 칩, 누르면 위 목록의 그 줄이 열린다 */
.oc-cite-ref{display:inline-block; vertical-align:super; font:inherit; font-size:.72em; font-weight:700;
  line-height:1.2; min-width:1.5em; margin:0 1px; padding:0 .35em; border:1px solid var(--line); border-radius:6px;
  background:var(--bg); color:var(--accent); text-align:center; cursor:pointer}
.oc-cite-ref:hover{border-color:var(--accent); background:var(--accent-soft)}
/* 검증 문단 끝의 '근거 · 자료명' 단추 — 같은 칩 모양에 자료명을 그대로 적는다 */
.oc-cite-ref.oc-cite-label{vertical-align:baseline; font-size:calc(var(--font-size-base) - 1pt); font-weight:600;
  line-height:1.5; margin:2px; padding:1px 7px; color:var(--tx-dim); text-align:left; word-break:keep-all}
.oc-claim-sources{font-size:var(--font-size-base); margin:5px 0 10px; color:var(--tx-faint)}

/* 추론 과정 끝 — 근거 점검 메모(quality.evidence_gaps). 조회 자료 목록 뒤, 접어 둔다 */
.oc-gapnote{font-size:var(--font-size-base); border:1px dashed var(--line); border-radius:8px; background:var(--bg-card)}
.oc-gapnote > summary{padding:6px 9px; cursor:pointer; font-weight:600; color:var(--tx-dim); word-break:keep-all}
.oc-gap-list{margin:0; padding:0 9px 8px 28px; display:flex; flex-direction:column; gap:4px; color:var(--tx-dim);
  line-height:1.55; word-break:keep-all; overflow-wrap:anywhere}
.oc-gap-tag{display:inline-block; margin-right:6px; font-size:calc(var(--font-size-base) - 1pt); font-weight:700;
  line-height:1.4; padding:0 6px; border:1px solid currentColor; border-radius:6px; white-space:nowrap;
  color:var(--red); background:color-mix(in srgb, var(--red) 10%, transparent)}

/* 처리 시간 요약 + 구간 폭포 — 말풍선 안(근거 목록과 메타 줄 사이) */
.oc-timing-slot:empty{display:none}
.oc-timing{margin:8px 0 2px; border:1px solid var(--line); border-radius:9px; background:var(--bg-soft);
  font-size:var(--font-size-base); line-height:1.6}
.oc-timing > summary{cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:center;
  gap:2px 4px; padding:6px 10px; color:var(--tx-dim)}
.oc-timing > summary::-webkit-details-marker{display:none}
.oc-timing > summary::before{content:"▸"; color:var(--tx-faint); margin-right:2px}
.oc-timing[open] > summary::before{content:"▾"}
.oc-tsum{display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.oc-tsum.all{font-weight:700; color:var(--tx)}
.oc-tsum i{display:inline-block; width:8px; height:8px; border-radius:2px}
.oc-tsum.llm i{background:var(--blue)}
.oc-tsum.jev i{background:var(--src-q)}
.oc-tsum.tool i{background:var(--green)}
.oc-tsum.server i{background:var(--tx-faint)}
.oc-tsum.other i{border:1px dashed var(--tx-faint)}
.oc-tdot{color:var(--tx-faint)}
.oc-tbody{container-type:inline-size; padding:4px 10px 10px; border-top:1px solid var(--line)}
.oc-tlegend{display:flex; flex-wrap:wrap; gap:4px 12px; margin:6px 0 8px; color:var(--tx-dim);
  font-size:calc(var(--font-size-base) - 1pt)}
.oc-tlegend > span{display:inline-flex; align-items:center; gap:5px}
/* 막대가 모든 줄에서 같은 x축을 쓰도록 열을 목록 전체가 공유한다(subgrid, 미지원 시 고정 폭) */
.oc-trows{list-style:none; margin:0; padding:0; display:grid; gap:2px 8px;
  grid-template-columns:max-content minmax(0,1fr) minmax(90px,36%) max-content; max-height:440px; overflow-y:auto}
.oc-trow{grid-column:1 / -1; display:grid; grid-template-columns:4.8em minmax(0,1fr) minmax(90px,36%) 7em;
  grid-template-columns:subgrid; gap:2px 8px; align-items:center; padding:3px 5px; border-radius:6px}
.oc-trow > .oc-tk{justify-self:start}
.oc-trow:hover{background:var(--bg-hover)}
.oc-trow .oc-tlabel{min-width:0; word-break:keep-all; overflow-wrap:anywhere; line-height:1.45}
.oc-trow .oc-tlabel small{display:block; color:var(--tx-faint); font-size:calc(var(--font-size-base) - 1pt)}
.oc-tpar{margin-left:6px; padding:0 5px; border:1px solid var(--line); border-radius:6px; color:var(--tx-faint);
  font-size:calc(var(--font-size-base) - 1pt); white-space:nowrap}
/* 병렬 묶음 — 왼쪽 괄호선으로 한데 묶는다(그림자라 막대 x축을 밀지 않는다) */
.oc-trow.grp{box-shadow:inset 2px 0 0 var(--tx-faint); border-radius:0}
.oc-trow.grp.g-first{border-top-left-radius:6px}
.oc-trow.grp.g-last{border-bottom-left-radius:6px}
.oc-ttrack{position:relative; height:10px; border:1px solid var(--line); border-radius:3px;
  background:var(--bg-card); overflow:hidden}
.oc-tbar{position:absolute; top:0; bottom:0; min-width:2px; border-radius:2px}
.oc-tbar.llm{background:var(--blue); color:var(--blue)}
.oc-tbar.jev{background:var(--src-q); color:var(--src-q)}
.oc-tbar.tool{background:var(--green); color:var(--green)}
.oc-tbar.server{background:var(--tx-faint); color:var(--tx-faint)}
/* 답변 뒤 백그라운드 구간(섀도 JEV) — 응답 시간 밖이라 속이 빈 점선 막대 */
.oc-trow.bg .oc-tbar{background:transparent; border:1px dashed currentColor; box-sizing:border-box}
.oc-trow.bg .oc-tlabel{color:var(--tx-dim)}
.oc-tend{position:absolute; top:0; bottom:0; width:0; border-left:1px dashed var(--tx-dim)}
.oc-tsec{white-space:nowrap; text-align:right; color:var(--tx-dim); font-variant-numeric:tabular-nums}
.oc-trow[data-status="error"] .oc-tsec, .oc-trow[data-status="timeout"] .oc-tsec{color:var(--red)}
.oc-tnote{margin:6px 0 0; color:var(--tx-faint); font-size:calc(var(--font-size-base) - 1pt)}
/* 좁은 말풍선 — 막대를 둘째 줄 전체 폭으로 내린다(막대가 줄 전체를 쓰니 열을 공유하지 않는다) */
@container (max-width:520px){
  .oc-trows{display:flex; flex-direction:column}
  .oc-trow{grid-template-columns:auto minmax(0,1fr) auto}
  .oc-trow .oc-ttrack{grid-column:1 / -1; grid-row:2}
}

.oc-clarification{white-space:normal}
.oc-clarification fieldset{min-width:0; padding:12px 0; margin:6px 0; border:0; border-bottom:1px solid var(--line)}
.oc-clarification fieldset[hidden]{display:none}
.oc-cq-progress{font-size:var(--font-size-base); font-weight:600; margin:10px 0 4px; color:var(--tx)}
.oc-clarification legend{font-size:var(--font-size-base); font-weight:600; line-height:1.6; padding:0}
.oc-cq-help{font-size:var(--font-size-base); color:var(--tx-dim); margin:4px 0 9px; line-height:1.6}
.oc-cq-option{display:flex; gap:9px; align-items:flex-start; padding:8px 10px; margin:5px 0;
  border:1px solid var(--line); border-radius:9px; font-size:var(--font-size-base); cursor:pointer}
.oc-cq-option:has(input:checked){border-color:var(--accent); background:var(--bg-soft)}
.oc-cq-option input{flex:0 0 auto; margin-top:5px; accent-color:var(--accent)}
.oc-cq-other{box-sizing:border-box; width:100%; min-height:76px; resize:vertical; font:inherit;
  font-size:var(--font-size-base); padding:8px; color:var(--tx); background:var(--bg-card); border:1px solid var(--line); border-radius:8px}

.oc-cq-input{display:block; margin:8px 0 12px 10px; font-size:var(--font-size-base); line-height:1.6}
.oc-cq-input[hidden]{display:none}
.oc-cq-input-control{display:flex; align-items:center; gap:8px; margin-top:4px}
.oc-cq-value{box-sizing:border-box; flex:1; width:0; min-width:0; font:inherit; padding:8px;
  color:var(--tx); background:var(--bg-card); border:1px solid var(--line); border-radius:8px}
.oc-cq-unit{flex:0 0 auto; color:var(--tx-dim)}
.oc-cq-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.oc-cq-nav{display:flex; justify-content:space-between; gap:8px; margin-top:10px}
.oc-cq-actions button,.oc-cq-nav button{font:inherit; font-size:var(--font-size-base); padding:9px 12px; border:1px solid var(--accent);
  border-radius:9px; background:var(--accent); color:var(--accent-contrast); cursor:pointer}
.oc-cq-nav button{background:var(--bg-card); color:var(--accent); min-width:70px}
.oc-cq-actions .oc-cq-general{background:var(--bg-card); color:var(--tx-dim); border-color:var(--line)}
.oc-cq-actions button:disabled,.oc-cq-nav button:disabled{opacity:.6; cursor:default}

.oc-retry{font:inherit; font-size:var(--font-size-base); margin:6px 0; padding:9px 12px; border:1px solid var(--accent);
  border-radius:9px; background:var(--accent); color:var(--accent-contrast); cursor:pointer}
.oc-retry:disabled{opacity:.6; cursor:default}
/* 2차 버튼 — oc-cq-general 과 같은 문법(취소·고쳐 쓰기처럼 주 행동이 아닌 것) */
.oc-retry.oc-secondary{background:var(--bg-card); color:var(--tx-dim); border-color:var(--line)}
.oc-actions{display:flex; flex-wrap:wrap; gap:8px; align-items:center}

.oc-cq-state{font-size:var(--font-size-base); color:var(--tx-dim); white-space:pre-wrap}

.oc-status{display:flex; gap:10px; align-items:flex-start; font-size:var(--font-size-base); font-weight:500; line-height:1.6;
  color:var(--tx); padding:4px 0 8px}
.oc-status i{flex:0 0 10px; width:10px; height:10px; margin-top:8px; border-radius:50%; background:var(--accent);
  animation:ocPulse 1.1s ease-in-out infinite}

.oc-research{margin:4px 0 16px; padding:14px; border:1px solid var(--accent);
  border-radius:12px; background:var(--bg-soft); font-size:var(--font-size-base); line-height:1.5}
.oc-research[hidden]{display:none}
.oc-research-heading,.oc-research-task-head{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.oc-research-count{color:var(--accent); font-weight:600}
.oc-research-caption{margin:6px 0 12px; color:var(--tx-dim)}
.oc-research-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:10px}
.oc-research-task{min-width:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--bg-card)}
.oc-research-task-head{color:var(--tx-dim)}
.oc-research-state{padding:3px 9px; border:1px solid currentColor; border-radius:20px; font-weight:600; white-space:nowrap}
.oc-research-task[data-status="running"]{border-color:var(--accent)}
.oc-research-task[data-status="running"] .oc-research-state{color:var(--accent); background:var(--accent-soft)}
.oc-research-task[data-status="running"] .oc-research-state span{display:inline-block; animation:ocPulse 1.1s ease-in-out infinite}
.oc-research-task[data-status="done"] .oc-research-state{color:var(--green)}
.oc-research-task[data-status="incomplete"] .oc-research-state,
.oc-research-task[data-status="timeout"] .oc-research-state,
.oc-research-task[data-status="disconnected"] .oc-research-state{color:var(--amber)}
.oc-research-focus{margin:10px 0 6px; font-weight:600; overflow-wrap:anywhere}
.oc-research-note{margin:0; color:var(--tx-dim); overflow-wrap:anywhere}
@media(prefers-reduced-motion:reduce){.oc-research-task .oc-research-state span{animation:none!important}}

.oc-reveal-controls{display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:0 0 10px; font-size:var(--font-size-base); color:var(--tx-dim)}
.oc-reveal-controls button{font:inherit; color:var(--accent); padding:3px 9px;
  border:1px solid var(--line); border-radius:7px; background:var(--bg-card)}
.oc-reveal-controls button:hover{background:var(--accent-soft)}

@keyframes ocPulse{0%,100%{opacity:.25; transform:scale(.8)}
  50%{opacity:1; transform:scale(1.15)}}

.oc-note{font-size:var(--font-size-base); border-left:3px solid var(--line); border-radius:4px;
  padding:5px 9px; margin:0 0 8px; background:var(--bg-soft)}
.oc-note.warn{border-color:var(--amber)}
.oc-note.err{border-color:var(--red); color:var(--red)}
.oc-note details{margin-top:5px; color:var(--tx-faint)}
.oc-note details summary{cursor:pointer}
.oc-note details pre{margin:5px 0 0; white-space:pre-wrap; word-break:break-all;
  font-size:var(--font-size-base); color:var(--tx-dim)}
.oc-note.info{color:var(--tx-faint)}

#ocComposer{flex:0 0 auto; display:flex; flex-wrap:wrap; gap:8px; padding:10px 14px 14px;
  border-top:1px solid var(--line)}
#ocComposerHelp{flex-basis:100%; margin:0; font-size:var(--font-size-base); line-height:1.5; color:var(--tx-dim)}
#ocInput{flex:1; min-width:0; font:inherit; font-size:var(--font-size-base); resize:none; min-height:42px;
  max-height:130px; padding:10px 13px; border:1px solid var(--line);
  border-radius:11px; background:var(--bg-card); color:var(--tx)}
#ocInput:focus{border-color:var(--accent)}
#ocComposer button{font:inherit; font-size:var(--font-size-base); padding:0 16px;
  border-radius:11px; border:1px solid var(--line); background:var(--bg-card);
  color:var(--tx); cursor:pointer}
#ocComposer #ocSend{background:var(--accent); color:var(--accent-contrast); border-color:var(--accent)}
#ocComposer button:disabled{opacity:.5; cursor:default}

/* 대상자 토글 — 세그먼트 컨트롤 */
#ocAudience{display:inline-flex; margin-left:8px; border:1px solid var(--line);
  border-radius:9px; overflow:hidden}
#ocAudience button{font:inherit; font-size:var(--font-size-base); padding:4px 12px; border:0;
  background:var(--bg); color:var(--tx-dim); cursor:pointer}
#ocAudience button.on{background:var(--accent); color:var(--accent-contrast); font-weight:700}

/* 노드 데이터 카드 — 클릭한 노드의 보유 데이터·연결 */
/* 노드 카드 — 시뮬레이터 항목 카드와 같은 문법: 유형 뱃지 + 구획 행. 15pt 기준 */
/* 카드는 그래프를 덮는 오버레이가 아니라 옆에 붙는 서랍 — 열리면 그래프 폭이 줄어든다 */
#ocNodeCard{flex:0 0 clamp(640px,70%,960px); max-width:calc(100% - 260px); min-width:0;
  box-sizing:border-box; overflow-y:auto; background:var(--bg-card);
  border-left:1px solid var(--line); padding:14px 16px; font-size:var(--font-size-base); line-height:1.7}
#ocNodeCard h4{margin:0 0 10px; display:flex; gap:9px; align-items:center}
#ocNodeCard .nc-kind{flex:0 0 auto; color:#fff; font-size:var(--font-size-base); font-weight:700;
  padding:2px 10px; border-radius:999px}
#ocNodeCard .nc-title{font-size:var(--font-size-base); font-weight:700; word-break:break-word}
#ocNodeCard .nc-close{margin-left:auto; border:0; background:none;
  color:var(--tx-faint); font-size:18px; cursor:pointer; flex:0 0 auto}
#ocNodeCard dl{margin:0 0 10px; display:grid; grid-template-columns:auto 1fr;
  gap:6px 12px}
#ocNodeCard dt{color:var(--tx-faint); font-size:var(--font-size-base); white-space:nowrap;
  padding-top:2px}
#ocNodeCard dd{margin:0; font-size:var(--font-size-base); word-break:break-word;
  background:var(--bg-soft); border-radius:8px; padding:6px 10px}
#ocNodeCard .nc-none{color:var(--tx-faint); font-size:var(--font-size-base)}
#ocNodeCard .nc-links{border-top:1px solid var(--line); padding-top:9px}
#ocNodeCard .nc-links-h{font-size:var(--font-size-base); font-weight:700; color:var(--tx-dim);
  margin-bottom:5px}
#ocNodeCard .nc-conn{display:flex; gap:7px; align-items:baseline; font-size:var(--font-size-base); width:100%;
  text-align:left; padding:3px 4px; border:0; border-radius:6px; background:none; color:var(--tx);
  cursor:pointer; word-break:break-word; font-family:inherit; line-height:1.6}
#ocNodeCard .nc-conn:hover{background:var(--bg-soft)}
#ocNodeCard .nc-grp{font-size:var(--font-size-base); font-weight:700; margin:7px 0 2px}
#ocNodeCard .nc-dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; align-self:center}
#ocNodeCard .nc-unpin{font-size:var(--font-size-base); padding:1px 8px; border-radius:8px; border:1px solid var(--line);
  background:none; color:var(--tx-dim); cursor:pointer; flex:0 0 auto}
#ocNodeCard .nc-rel{flex:0 0 auto; font-size:var(--font-size-base); color:var(--tx-dim);
  border:1px solid var(--line); border-radius:8px; padding:0 8px;
  background:var(--bg-soft); white-space:nowrap}
#ocNodeCard .nc-stale{color:var(--red); font-size:var(--font-size-base); margin:0 0 8px}
#ocNodeCard .nc-fresh{color:var(--tx-dim); font-size:var(--font-size-base); margin:0 0 8px}
#ocNodeCard .nc-fold{font-size:var(--font-size-base); color:var(--tx-dim); background:var(--bg-soft);
  border-radius:8px; padding:6px 10px; margin:0 0 10px; line-height:1.6}
#ocNodeCard .nc-expand{font-size:var(--font-size-base); padding:1px 9px; border-radius:8px; margin-left:6px;
  border:1px solid var(--accent); background:none; color:var(--accent); cursor:pointer}
#ocNodeCard .nc-via{flex:0 0 auto; font-size:var(--font-size-base); color:var(--tx-faint); min-width:1.6em}

#ocNodeCard .nc-norm-panel{margin-bottom:20px; overflow-wrap:anywhere}
#ocNodeCard .nc-norm-panel h5{font-size:1.12em; margin:8px 0; color:var(--tx)}
#ocNodeCard .nc-norm-panel h6{font-size:1em; margin:12px 0 6px; color:var(--tx)}
#ocNodeCard .nc-norm-group{margin:18px 0}
#ocNodeCard .nc-norm-group > h6{border-bottom:1px solid var(--line); padding-bottom:8px}
#ocNodeCard .nc-norm{border:1px solid var(--line); border-radius:12px; padding:14px; margin:10px 0; background:var(--bg-card)}
#ocNodeCard .nc-norm-selected{border-color:#7c3aed; box-shadow:0 0 0 1px #7c3aed}
#ocNodeCard .nc-norm header{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
#ocNodeCard .nc-norm-role{color:#6d28d9; background:#f3eefe; padding:3px 9px; border-radius:7px}
#ocNodeCard .nc-norm-classification, #ocNodeCard .nc-norm-note, #ocNodeCard .nc-norm-missing{color:var(--tx-dim); margin:7px 0; font-size:var(--font-size-base); line-height:1.65}
#ocNodeCard .nc-norm-source, #ocNodeCard .nc-norm-description{margin:8px 0; color:var(--tx-dim)}
#ocNodeCard .nc-norm-text, #ocNodeCard .nc-norm-source-text{white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.85; margin:8px 0; color:var(--tx)}
#ocNodeCard dl.nc-norm-facts{grid-template-columns:minmax(65px,auto) minmax(0,1fr); margin:12px 0; padding-top:10px; border-top:1px solid var(--line)}
#ocNodeCard .nc-norm-facts dt{white-space:normal; max-width:8em}
#ocNodeCard .nc-norm-facts dd{padding:0; background:none}
#ocNodeCard .nc-norm-exceptions{border-left:3px solid #a78bfa; padding-left:12px; margin-top:14px}
#ocNodeCard .nc-norm-exceptions .nc-norm{padding:10px; border:0; background:var(--bg-soft)}
#ocNodeCard .nc-norm-jump{font:inherit; color:var(--accent); border:1px solid var(--line); background:var(--bg-card); border-radius:8px; padding:4px 9px; cursor:pointer}
#ocNodeCard .nc-norm header .nc-norm-jump{margin-left:auto}
#ocNodeCard .nc-norm-jump:hover{background:var(--bg-soft); border-color:var(--accent)}
#ocNodeCard .nc-norm-jump:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 수치와 적용 맥락을 같은 카드에서 읽는다. 같은 숫자의 후보·확정값도 구분한다. */
#ocNodeCard .nc-parameter-panel{margin:4px 0 24px; overflow-wrap:anywhere}
#ocNodeCard .nc-parameter-panel h5{font-size:1.12em; margin:8px 0 12px}
#ocNodeCard .nc-parameter-panel h6{font-size:1em; margin:14px 0 8px}
#ocNodeCard .nc-parameter-group{margin:16px 0}
#ocNodeCard .nc-parameter-group > h6{border-bottom:1px solid var(--line); padding-bottom:9px}
#ocNodeCard .nc-parameter{border:1px solid var(--line); border-radius:12px; padding:16px; margin:10px 0; background:var(--bg-card)}
#ocNodeCard .nc-parameter-selected{border-color:#9c36b5; box-shadow:0 0 0 1px #9c36b5}
#ocNodeCard .nc-parameter header{display:flex; flex-wrap:wrap; align-items:center; gap:8px}
#ocNodeCard .nc-parameter-title{font-weight:700; color:var(--tx)}
#ocNodeCard .nc-parameter-value{display:block; font-size:1.4em; line-height:1.5; font-weight:750; color:#862e9c; margin:8px 0}
#ocNodeCard .nc-parameter-status{display:inline-block; border-radius:6px; padding:2px 8px; color:var(--tx-dim); background:var(--bg-soft); font-size:var(--font-size-base)}
#ocNodeCard dl.nc-parameter-facts{grid-template-columns:minmax(65px,auto) minmax(0,1fr); margin:12px 0; padding-top:10px; border-top:1px solid var(--line)}
#ocNodeCard .nc-parameter-facts dt{white-space:normal; max-width:8em}
#ocNodeCard .nc-parameter-facts dd{padding:0; background:none}
#ocNodeCard .nc-parameter-source{color:var(--tx-dim); margin:8px 0}
#ocNodeCard .nc-parameter-source-text{white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.85; padding:12px 14px; border-left:3px solid #be8acb; background:var(--bg-soft); border-radius:0 8px 8px 0; margin:10px 0}
#ocNodeCard .nc-parameter-note, #ocNodeCard .nc-parameter-missing{color:var(--tx-dim); margin:8px 0; font-size:var(--font-size-base); line-height:1.65}
#ocNodeCard .nc-parameter-relations{margin-top:12px; padding-top:10px; border-top:1px solid var(--line)}
#ocNodeCard .nc-parameter-jump{font:inherit; color:var(--accent); border:1px solid var(--line); background:var(--bg-card); border-radius:8px; padding:4px 9px; cursor:pointer}
#ocNodeCard .nc-parameter header .nc-parameter-jump{margin-left:auto}
#ocNodeCard .nc-parameter-jump:hover{background:var(--bg-soft); border-color:var(--accent)}
#ocNodeCard .nc-parameter-jump:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* 작은 그래프 영역에서는 본문을 읽을 폭을 확보하고 닫기로 그래프에 복귀한다. */
@container (max-width:900px){
  #ocNodeCard{position:absolute; inset:0; z-index:3; max-width:100%; width:auto; box-sizing:border-box}
  #ocNodeCard h4{position:sticky; top:-14px; padding:10px 0; background:var(--bg-card); z-index:1}
}
@media (max-width:1100px){
  #ocCenter:has(#ocNodeCard:not([hidden])) > #ocLegend{display:none}
}

.oc-panel-h .mini{margin-left:auto; font-size:var(--font-size-base); padding:2px 9px;
  border-radius:8px; border:1px solid var(--line); background:none;
  color:var(--tx-dim); cursor:pointer}