/* nep-graph.css — 그래프 화면 전용 최소 보강.
   atlas.css 의 변수만 쓴다. 색·폰트·여백 체계를 새로 만들지 않는다. */
.nep-sel{
  font:inherit;color:var(--ink);background:var(--card);
  border:1px solid var(--line);border-radius:8px;padding:6px 10px;max-width:340px
}
table.nep-t{width:100%;border-collapse:collapse;font-size:14px}
table.nep-t th,table.nep-t td{
  text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top
}
table.nep-t th{
  font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted,#6b7280);font-weight:600;position:sticky;top:0;background:var(--card)
}
table.nep-t td.num,table.nep-t th.num{text-align:right;font-variant-numeric:tabular-nums}
table.nep-t code{font-size:12.5px;color:var(--accent)}
table.nep-t .n-sub{font-size:11.5px;color:var(--muted,#6b7280);margin-top:1px}

/* ── 지분 그래프 (2026-08-15 개편) ─────────────────────────────────────────
   종전 그림은 회사 40개를 원 하나에 늘어놓고 지분선을 원 안으로 그었다. 선이
   가운데서 뭉쳐 방향도 세기도 읽히지 않았고, 라벨은 서로 겹쳤다(영문명이 길어
   영어 화면에서 특히 심했다). 지금은 소유 깊이에 따라 층으로 내려 놓는다 —
   위에서 아래로 '누가 무엇을 가졌나' 로 읽는다. */
.nep-graph{position:relative}
.nep-graph-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.nep-graph svg{display:block;width:100%;min-width:720px;height:auto}

/* 층 안내 글 */
.nep-lyr{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  fill:var(--muted,#6b7280)}
.nep-lyr-line{stroke:var(--rule,var(--line));stroke-width:1;stroke-dasharray:2 4}

/* 노드 */
.nep-n{cursor:default}
.nep-n[data-href]{cursor:pointer}
.nep-n circle{stroke:var(--card);stroke-width:1.5}
.nep-n.listed circle{fill:var(--accent)}
.nep-n.unlisted circle{fill:var(--muted,#9aa4b2)}
.nep-n.owner circle{fill:var(--c-go,var(--accent))}
.nep-n text{
  /* 흰 테두리를 글자 뒤에 깔아 선 위에 놓여도 읽힌다 */
  paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round;
  fill:var(--ink)
}
.nep-n.unlisted text{fill:var(--ink2,var(--ink));opacity:.86}
.nep-n .nep-sub{font-size:9.5px;fill:var(--muted,#6b7280);stroke-width:2.5px}
.nep-n:focus{outline:none}
.nep-n:focus circle{stroke:var(--ink);stroke-width:2}

/* 지분선 */
.nep-e{fill:none}
.nep-e.w1{stroke:var(--line2,var(--line));stroke-width:1}
.nep-e.w2{stroke:var(--ink3,var(--muted));stroke-width:1.4;opacity:.75}
.nep-e.w3{stroke:var(--accent);stroke-width:2.2;opacity:.9}
.nep-e.own{stroke:var(--c-go,var(--accent));stroke-width:1.4;stroke-dasharray:4 3;opacity:.85}
.nep-est{font-size:9.5px;fill:var(--muted,#6b7280);paint-order:stroke;
  stroke:var(--card);stroke-width:3px;opacity:0;pointer-events:none}

/* 가리키면 그 회사에 붙은 선만 남긴다 — 지분율 숫자도 그때만 낸다 */
.nep-graph svg.dim .nep-e{opacity:.1}
.nep-graph svg.dim .nep-n{opacity:.3}
.nep-graph svg.dim .nep-e.hot{opacity:1}
.nep-graph svg.dim .nep-n.hot{opacity:1}
.nep-graph svg.dim .nep-est.hot{opacity:1}

/* 범례 */
.nep-key{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  font-size:12px;color:var(--muted,#6b7280)}
.nep-key b{font-weight:600;color:var(--ink2,var(--ink))}
.nep-key i{display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:5px;vertical-align:-1px;font-style:normal}
.nep-key i.listed{background:var(--accent)}
.nep-key i.unlisted{background:var(--muted,#9aa4b2)}
.nep-key i.owner{background:var(--c-go,var(--accent))}
.nep-key s{display:inline-block;width:22px;height:0;margin-right:5px;
  vertical-align:3px;text-decoration:none;border-top:2.2px solid var(--accent)}
.nep-key s.w2{border-top:1.4px solid var(--ink3,var(--muted))}
.nep-key s.w1{border-top:1px solid var(--line2,var(--line))}

/* 집단 요약 */
.nep-facts{display:flex;flex-wrap:wrap;gap:10px 22px;margin:0 0 12px}
.nep-fact{min-width:96px}
.nep-fact b{display:block;font-size:17px;font-weight:650;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.nep-fact span{font-size:11.5px;color:var(--muted,#6b7280)}

@media (max-width:720px){
  .nep-graph svg{min-width:640px}
  .nep-facts{gap:8px 16px}
}