/* 스킬 찾기 (2026-09-28) — 장비 목록과 같은 결로 맞췄다 (equip-list.css) */

/* ── 거르기 줄 ───────────────────────────────────────────────────────── */
.sk-filter { display: flex; flex-wrap: wrap; gap: .3rem; }
.sk-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .22rem .55rem;
    border: 1px solid var(--ls-border);
    border-radius: .3rem;
    background: var(--ls-surface);
    color: var(--ls-text-2);
    font-size: .8rem;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.sk-btn:hover { border-color: var(--ls-primary); color: var(--ls-accent); }
.sk-btn.is-on { background: var(--ls-primary); border-color: var(--ls-primary); color: #fff; font-weight: 600; }
.sk-btn em { font-style: normal; opacity: .6; font-size: .72rem; }
/* 유형 칸이 페이지 주소를 바꾸는 링크가 됐다 (2026-09-30) — 밑줄 없이 단추처럼 */
a.sk-btn { text-decoration: none; }
.sk-pager { display: flex; justify-content: center; align-items: center; gap: .5rem; }

/* ── 스킬 카드 ───────────────────────────────────────────────────────── */
.sk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
    gap: .7rem;
}
.sk-card {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    border: 1px solid var(--ls-border);
    border-radius: .4rem;
    background: var(--ls-surface);
    padding: .6rem;
    text-align: left;
    cursor: pointer;
    transition: border-color .12s;
}
.sk-card:hover { border-color: var(--ls-primary); }

.sk-head { display: flex; gap: .55rem; align-items: flex-start; }
.sk-icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: .3rem;
}
.sk-icon-none { background: var(--ls-border); opacity: .45; }
.sk-title { min-width: 0; }
.sk-name { font-weight: 600; overflow-wrap: anywhere; }
.sk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .15rem; }
/* 서브스킬 — 어느 스킬에 딸린 것인지 */
.sk-parent { font-size: .72rem; color: var(--ls-muted); }

.sk-line { display: flex; flex-wrap: wrap; gap: .25rem .45rem; }
.sk-chip { font-size: .75rem; color: var(--ls-text-2); white-space: nowrap; }
.sk-chip b { font-weight: 600; color: var(--ls-muted); margin-right: .2rem; }

/* 목록에서는 효과 글을 넉 줄까지만 — 나머지는 팝업에서 본다 */
.sk-desc {
    font-size: .82rem;
    color: var(--ls-text-2);
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sk-desc-full { display: block; overflow: visible; }

/* ── 팝업 ────────────────────────────────────────────────────────────── */
.sk-subs { margin-top: .8rem; border-top: 1px solid var(--ls-border); padding-top: .6rem; }
.sk-subs-title { font-weight: 600; font-size: .85rem; margin-bottom: .35rem; }
.sk-sub { border-left: 2px solid var(--ls-border); padding: .1rem 0 .1rem .55rem; margin-bottom: .5rem; }
.sk-sub-name { font-weight: 600; font-size: .9rem; }

.sk-foot { margin-top: .8rem; border-top: 1px solid var(--ls-border); padding-top: .6rem; }
/* 쓰는 영웅 — 이름 딱지가 아니라 **카드 그림**이다 (2026-10-02 요청).
   용병 팝업과 같은 꼴·같은 크기다 (soldier-modal.css 의 .sm-heroes). 줄이 많아질 수
   있어 스스로 스크롤한다. */
.sk-heroes {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    max-height: 14rem;
    overflow-y: auto;
}
.sk-hero {
    position: relative;
    display: block;
    width: 56px;
    height: 56px;
    border-radius: .35rem;
    overflow: hidden;
    text-decoration: none;
}
.sk-hero img { width: 56px; height: 56px; object-fit: cover; display: block; }
.sk-hero:hover { outline: 2px solid var(--ls-primary); }

/* 이름은 영웅 목록의 표기 스위치가 켜져 있을 때만 (기본은 그림만) */
.sk-hero-name { display: none; }
.sk-heroes.names-on .sk-hero-name {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1px 3px;
    font-size: .66rem;
    line-height: 12px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, .55);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ── 어두울 때 ───────────────────────────────────────────────────────── */
[data-bs-theme=dark] .sk-subs,
[data-bs-theme=dark] .sk-foot { border-top-color: #2b3035; }
[data-bs-theme=dark] .sk-sub { border-left-color: #2b3035; }