/* 숨은 재능 4등급(js/talent-tiers.js). 흔함·희귀·전설 색은 css/talents.css, 신화와 등급표·전설 이상 연출은 여기 */
:root { --rar-c: #8A8F98; --rar-m: #C2367E; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rar-m: #F06AAE; } }
:root[data-theme="dark"] { --rar-m: #F06AAE; }

/* 신화: 테두리와 옅은 배경 */
.intro-trait.rar-m, .p2-trait.rar-m { border-color: var(--rar-m); box-shadow: 3px 3px 0 var(--rar-m); background: color-mix(in srgb, var(--rar-m) 10%, var(--bg)); }
.trait-chip.rar-m b { color: var(--rar-m); }
.tal-cell.got.rar-m { border-color: var(--rar-m); border-width: 2px; }

/* 전설·신화가 뽑힌 순간: 빛이 한 번 지나간다(되풀이하지 않는다) */
.intro-trait.rar-l, .intro-trait.rar-m, .p2-trait.rar-l, .p2-trait.rar-m { position: relative; overflow: hidden; }
.intro-trait.rar-l::after, .intro-trait.rar-m::after, .p2-trait.rar-l::after, .p2-trait.rar-m::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-110%); animation: ttShine 1.1s ease-out .25s 1 forwards;
}
@keyframes ttShine { to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) { .intro-trait::after, .p2-trait::after { animation: none; display: none; } }

/* 등급표 단추(카드 꼬리표 옆) */
.tt-btn { margin-left: 6px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: 700 11px/1.5 var(--body); cursor: pointer; vertical-align: 1px; }
.tt-btn:focus-visible { outline: 2px solid var(--pc, var(--ink)); outline-offset: 2px; }
.tt-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; color: var(--muted); }
.tt-row .tt-btn { margin-left: 0; color: var(--ink); }
.tt-row small { font: 500 12px var(--body); }

/* 등급표 창 */
.tt-lead { margin: 0 0 10px; font: 500 14px/1.55 var(--body); color: var(--ink); }
.tal-tiers { width: 100%; border-collapse: collapse; font: 600 14px var(--body); color: var(--ink); }
.tal-tiers th, .tal-tiers td { padding: 9px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.tal-tiers thead th { font: 700 12px var(--body); color: var(--muted); }
.tal-tiers td { font-variant-numeric: tabular-nums; }
.tal-tiers td b { font: 800 16px var(--head); }
.tt-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--rar-c); vertical-align: 0; }
.rar-u .tt-dot { background: var(--rar-u); } .rar-l .tt-dot { background: var(--rar-l); } .rar-m .tt-dot { background: var(--rar-m); }
.tt-notes { margin-top: 12px; }

/* 재능 도감 탭 위 요약 */
.tt-sum { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; font: 600 13px var(--body); color: var(--ink); }
.tt-sum small { color: var(--muted); font-weight: 600; }