/* ─────────────────────────────────────────────────────────────────────────
   고유기 — 영웅별 재능 모음 (2026-10-04)

   줄 모양은 중앙율정(second-awaken.css)과 똑같이 **가로 한 줄**이다 — 영웅 카드와
   이름을 왼쪽 고정 칸에 두고 효과가 남은 폭을 다 쓴다. 가운데에 성급 별이 하나 더
   들어가는 것만 다르다.

   별은 영웅 상세(hero-details.css)의 것과 **같은 두 가지 색**이다 — 회색이 꺼짐,
   금색이 켜짐 (2026-09-28 사용자 지시). 못 고르는 별은 손 모양과 치켜올림만 뺀다.
   여기서는 단추(<button>)라 글리프를 ::before 로 넣는다.
   ───────────────────────────────────────────────────────────────────────── */

/* ── 성급 한꺼번에 맞추는 줄 ──────────────────────────────────────────── */
.tl-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
}
.tl-stars-all { display: inline-flex; gap: .25rem; }

/* ── 목록 ─────────────────────────────────────────────────────────────── */
.tl-list { display: flex; flex-direction: column; gap: .4rem; }

.tl-row {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    border: 1px solid var(--ls-border);
    border-radius: .5rem;
    background: var(--ls-surface);
    padding: .55rem .7rem;
}

.tl-hero { flex: 0 0 auto; display: block; width: 56px; height: 56px; border-radius: .35rem; overflow: hidden; }
.tl-hero img { width: 56px; height: 56px; object-fit: cover; display: block; }
.tl-hero:hover { outline: 2px solid var(--ls-primary); }

/* 영웅·고유기 이름 — 고정 폭이라 효과의 왼쪽 끝이 줄마다 가지런하다 */
.tl-title { flex: 0 0 12rem; min-width: 0; }
.tl-hero-name { font-size: .78rem; color: var(--ls-muted); line-height: 1.2; }
.tl-name {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-weight: 700;
    line-height: 1.3;
    min-width: 0;
}
.tl-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: .25rem; object-fit: cover; }
.tl-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .15rem; }
.tl-chips .badge { font-size: .68rem; font-weight: 600; }

/* ── 별 ───────────────────────────────────────────────────────────────── */
.tl-stars {
    flex: 0 0 auto;
    display: inline-flex;
    gap: 2px;
    align-self: center;
    user-select: none;
}
.tl-star {
    border: 0;
    background: none;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    color: #d5d9e2;              /* 꺼진 별 */
    cursor: pointer;
    transition: color .12s, transform .12s;
}
.tl-star::before { content: '\2605'; }   /* ★ */
.tl-star.on { color: #f7b924; }          /* 켜진 별 */
.tl-star.fixed { cursor: default; }
.tl-stars:hover .tl-star:not(.fixed) { transform: translateY(-1px); }

.tl-effect {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .86rem;
    line-height: 1.45;
    word-break: keep-all;
}

/* 작업중(비공개) 영웅의 줄 — 편집자에게만 온다 */
.tl-row.is-draft { border-style: dashed; }
/* SP 고유기술은 왼쪽에 띠를 둬 한눈에 갈린다 */
.tl-row.is-sp { border-left: 3px solid var(--ls-danger, #f06548); }
/* SSR 고유기 (272) — 영웅 상세의 노란 표와 같은 빛 */
.tl-row.is-ssr { border-left: 3px solid var(--ls-warn-text-2, #f7b84b); }

/* 좁은 화면 — 별과 효과를 아래로 내린다 */
@media (max-width: 991.98px) {
    .tl-row { flex-wrap: wrap; }
    .tl-title { flex: 1 1 auto; }
    .tl-stars { align-self: flex-start; }
    .tl-effect { flex: 1 1 100%; margin-top: .35rem; }
}

/* ── 어두울 때 ───────────────────────────────────────────────────────── */
[data-bs-theme=dark] .tl-row { background: var(--ls-surface); }
[data-bs-theme=dark] .tl-star:not(.on) { color: #495057; }