/* ============================================================================
   crosslink.css — 「알토랩의 다른 실험」 블록 (교차 유도)
   ----------------------------------------------------------------------------
   js/crosslink.js 가 [data-xlink] 자리에 그린다. 토큰은 base.css 것만 쓴다
   (이 파일에 새 색·글자 크기를 만들지 않는다).
   index.html 의 villain.css ?v= 짝과 별개 파일이라 따로 캐시를 끊는다.
   ========================================================================== */

.vg-xlink {
  width: 100%;
  max-width: 720px;
  margin: 40px auto 0;
  padding: 28px;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.vg-xlink[hidden] { display: none; }

.vg-xlink__eyebrow {
  margin: 0 0 6px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--c-accent);
}
.vg-xlink__title {
  margin: 0 0 16px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-head);
  color: var(--c-ink);
}

.vg-xlink__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.vg-xlink__item {
  display: block;
  padding: 14px 16px;
  background: var(--c-panel);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--r-md);
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.vg-xlink__item:hover {
  background: var(--c-panel-alt);
  border-color: var(--c-line-strong);
}
.vg-xlink__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-ink);
}
.vg-xlink__line {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--c-body);
}

.vg-xlink__all {
  display: inline-block;
  margin-top: 16px;
  padding: 8px 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-accent-soft);
  text-decoration: none;
}
.vg-xlink__all:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 809.98px) {
  .vg-xlink { padding: 22px 18px; margin-top: 32px; }
}