/* Reference 칸(x-ui.reference) — 같은 내용을 두 화면에 두지 않고 원본 링크 + 짧은 설명 팝업만(SSOT 11절 "내용 한 곳 — 중복 금지") */
.sonub-reference { display: grid; gap: var(--wa-space-s); padding: var(--wa-space-m) var(--wa-space-l); border: 1px solid var(--wa-color-brand-border-normal); border-inline-start-width: 4px; border-radius: var(--sonub-radius-card, 12px); background: var(--sonub-accent-soft, var(--wa-color-brand-fill-quiet)); }
.sonub-reference-title { display: flex; align-items: center; gap: var(--wa-space-xs); margin: 0; color: var(--sonub-accent-ink, var(--wa-color-brand-on-quiet)); font-weight: 700; }
.sonub-reference ul { display: grid; gap: var(--wa-space-xs); margin: 0; padding: 0; list-style: none; }
.sonub-reference li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wa-space-2xs); }
.sonub-reference a { display: inline-flex; align-items: center; gap: var(--wa-space-xs); color: var(--sonub-accent-ink, var(--wa-color-brand-on-quiet)); font-weight: 600; }
.sonub-reference a:hover { text-decoration: underline; }