/* 숨은 재능(js/talents.js · js/talent-dex.js, docs/dev/16-talents.md). 등급은 테두리 색으로 나눈다. 신화 색과 전설 이상이 뽑힐 때 한 번 지나가는 빛은 css/talent-tiers.css */
:root { --rar-u: #3C78C8; --rar-l: #E2A81F; }
/* 주사위 카드·포스터 */
.intro-trait.rar-u, .p2-trait.rar-u { border-color: var(--rar-u); box-shadow: 3px 3px 0 var(--rar-u); }
.intro-trait.rar-l, .p2-trait.rar-l { border-color: var(--rar-l); box-shadow: 3px 3px 0 var(--rar-l); background: color-mix(in srgb, var(--rar-l) 10%, var(--bg)); }
.intro-trait + .intro-trait { margin-top: 8px; }
/* 프로필 칩 */
.trait-chip + .trait-chip { margin-top: -10px; }
.trait-chip.rar-u b { color: color-mix(in srgb, var(--rar-u) 55%, var(--on-dark)); }
.trait-chip.rar-l b { color: var(--rar-l); }
.trait-chip small { opacity: .7; }
.trait-chip.lost { opacity: .55; }
/* 결과 창 알림: 처음 드러날 때는 카드, 그다음은 한 줄 */
.tal-note { margin: 10px 0 0; font: 600 13px var(--body); color: var(--ink); }
.tal-note.first { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 10px; background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
.tal-note.first small { font: 800 11.5px var(--body); color: var(--muted); letter-spacing: .02em; }
.tal-note.first b { font: 800 16px 'Paperlogy', var(--head); }
.tal-note.first span { font: 600 13px var(--body); }
.tal-note.first .tn-cost { color: var(--muted); }
.tal-note.first p { margin: 2px 0 0; font: 500 12.5px var(--body); color: var(--muted); }
/* 재능 도감 */
.tal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.tal-cell { display: flex; flex-direction: column; gap: 2px; min-height: 92px; padding: 8px; border-radius: 8px; border: 1px dashed var(--line); background: var(--soft); color: var(--muted); }
.tal-cell i { font-style: normal; font-size: 22px; line-height: 1.1; }
.tal-cell b { font: 800 13px var(--body); color: var(--ink); }
.tal-cell small { font: 700 10.5px var(--body); }
.tal-cell span { font: 500 11.5px/1.35 var(--body); }
.tal-cell.got { border: 1.5px solid var(--ink); background: var(--card); }
.tal-cell.got.rar-u { border-color: var(--rar-u); } .tal-cell.got.rar-l { border-color: var(--rar-l); border-width: 2px; }
.tal-cell.ghost i { opacity: .5; }
.tal-cell.new { box-shadow: 0 0 0 2px var(--gold); }