/* ══ 연결 배지·절 — 공용 정본 (2026-09-08) ═══════════════════════════════════════
   짝: `links.js`(문면 생성). 설계서 `docs/design/20260908_stockhub_design_system.md` §4·§6.

   등급 = 재질로 가른다, 색으로 가르지 않는다.
     explicit `.lk.ex` — 잉크 채움(불투명). id 키로 맺은 것.
     derived  `.lk.dv` — 무채 바탕 + 점선 테두리. 규칙으로 맺은 것 — 「아직 올리지 않은」 연결.
   연결 수는 방향이 없는 양이다 — 적·청 금지(§4). 새 토큰 0(게이트 [7]: 여기서 `--` 선언 안 함).
   크기·간격은 설계서 스케일: 보조 11.5 / 본문 13 / 간격 4·8·12.
   ═══════════════════════════════════════════════════════════════════════════════ */
.lk { display:inline-block; font:700 11.5px var(--font); line-height:1.4; padding:1px 7px;
  border-radius:6px; margin:1px 4px 1px 0; white-space:nowrap; vertical-align:middle;
  font-variant-numeric:tabular-nums; cursor:pointer; transition:background .15s, color .15s; }
.lk.ex { background:var(--ink); color:var(--bg); }   /* 09-09: 리터럴 흰색 → 토큰(다크에서 뒤집힌다) */
.lk.dv { background:var(--tint); color:var(--ink3); box-shadow:inset 0 0 0 1px var(--hair2); }
.lk.ex:hover { background:var(--ink2); }
.lk.dv:hover { color:var(--ink); }
.lk.static { cursor:default; }
.lk:active { transform:scale(.985); }
/* 배지가 없을 때 — 「—」는 값이 아니라 결손이다(§3.2). 사유는 title. */
.lk-none { color:var(--ink4); cursor:help; }
/* 조인 축 표기 — event_id 가 원장에 없어 종목으로 찾았을 때. 등급이 아니라 **찾은 길**이다. */
.lk-by { display:inline-block; font:500 11.5px var(--font); color:var(--ink3); margin-right:4px; cursor:help; }
/* 편 페이지 연결 절 5 */
.lk-wrap h4 .lk-asof { font-weight:500; color:var(--ink3); margin-left:8px; }
.lk-sec { margin-top:12px; }
.lk-sec h5 { margin:0 0 4px; font:700 11.5px var(--font); color:var(--ink3); }
.lk-sec h5 .lk-cnt { color:var(--ink); font-variant-numeric:tabular-nums; }
.lk-sec h5 .lk-edge { font-weight:500; margin-left:6px; }
.lk-row { display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; padding:4px 0;
  border-top:1px solid var(--hair); font-size:13px; line-height:1.55; }
.lk-row code { font-size:11.5px; background:var(--tint); padding:0 5px; border-radius:4px; }
.lk-row .lk-id { cursor:pointer; font-weight:600; }
.lk-row .lk-id:hover { text-decoration:underline; }
.lk-row .lk-meta { color:var(--ink3); font-size:11.5px; }
.lk-row .lk-vals { font-variant-numeric:tabular-nums; }
.lk-empty { font-size:13px; color:var(--ink3); padding:4px 0; border-top:1px solid var(--hair); }
.lk-more { font-size:11.5px; color:var(--ink3); padding:4px 0; }
.lk-sum { display:inline-block; font:500 11.5px var(--font); color:var(--ink3); margin-right:8px;
  font-variant-numeric:tabular-nums; cursor:help; }
.lk-cell { white-space:nowrap; }

/* ── 연결 아이콘 + 팝오버 (2026-09-13, CIO 「요 기호들 필요없으니깐 요 열 길이 줄이고」) ──
   배지 두 벌(검정·회색)이 겹쳐 열을 차지하던 자리를 **작은 회색 아이콘 하나**로 줄인다.
   연결이 0 이면 아무것도 안 그린다 — 그래서 `.lk-cell` 은 폭이 0 이 되고 열이 사라진다. */
/* ⚠ 아이콘이 **혼자 다음 줄로 떨어지지 않게** 한다 — 이름 셀이 좁으면 회사명·티커·북 칩
   뒤에서 줄이 바뀌어 아이콘만 둘째 줄에 섰다(09-13 실렌더에서 봤다). 앞 낱말과 **붙인다**. */
.lk-anchor, .lk-cell { white-space:nowrap; }
.lk-i { display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px;
  margin-left:3px; color:var(--ink4); cursor:pointer; vertical-align:-2px; border-radius:4px;
  transition:color .15s, background .15s; }
.lk-i:hover, .lk-i:focus-visible { color:var(--ink2); background:var(--tint); outline:none; }
.lk-i:focus-visible { box-shadow:0 0 0 2px var(--blue); }
.lk-cell { white-space:nowrap; }
.lk-cell:empty { display:none; }
/* 앵커가 제 칸을 통째로 차지하던 열 — 아이콘 폭으로 줄인다(열을 없애는 대신 접는다). */
td.lk-col, th.lk-col { width:1px; padding-left:4px; padding-right:4px; white-space:nowrap; }

.lk-pop { position:absolute; z-index:200; min-width:180px; max-width:320px;
  background:var(--panel); border:1px solid var(--hair); border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.16); padding:8px 10px; }
.lk-pop-g { margin-bottom:6px; }
.lk-pop-g:last-child { margin-bottom:0; }
.lk-pop-g h6 { margin:0 0 3px; font:700 11px var(--font); color:var(--ink3); }
.lk-pop-g h6 span { color:var(--ink); font-variant-numeric:tabular-nums; }
.lk-pop-a { display:inline-block; font:600 11.5px var(--font); padding:1px 6px; border-radius:5px;
  margin:1px 4px 1px 0; cursor:pointer; white-space:nowrap; }
.lk-pop-a.ex { background:var(--ink); color:var(--bg); }
.lk-pop-a.dv { background:var(--tint); color:var(--ink3); box-shadow:inset 0 0 0 1px var(--hair2); }
.lk-pop-a.ex:hover { background:var(--ink2); }
.lk-pop-a.dv:hover { color:var(--ink); }
.lk-pop-more { font:500 11px var(--font); color:var(--ink4); }