/* ── 병종 고르기 ─────────────────────────────────────────────────────── */
.troop-filter {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}
.troop-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .6rem;
    border: 1px solid #e9ebec;
    border-radius: .3rem;
    background: #fff;
    color: #495057;
    font-size: .8125rem;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.troop-btn:hover { border-color: #405189; color: #405189; }
.troop-btn.is-on { background: #405189; border-color: #405189; color: #fff; }
.troop-btn img { width: 20px; height: 20px; object-fit: contain; }
.troop-btn em { font-style: normal; opacity: .65; font-size: .75rem; }
.troop-btn .sp-dot {
    font-style: normal;
    font-size: .6rem;
    font-weight: 700;
    padding: 0 .25rem;
    border-radius: .2rem;
    background: #f06548;
    color: #fff;
}
.troop-btn.is-on .sp-dot { background: #fff; color: #405189; }

/* ── 용병 카드 ───────────────────────────────────────────────────────── */
.soldier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: .75rem;
}
.soldier-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e9ebec;
    border-radius: .4rem;
    background: #fff;
    padding: .6rem;
}

/* 영웅 상세에서 용병을 눌러 넘어왔을 때, 어느 카드인지 잠깐 짚어 준다
   (?soldier=<id> — soldier-list.js 의 focusFromUrl) */
.soldier-card.is-focused {
    border-color: #405189;
    box-shadow: 0 0 0 3px rgba(64, 81, 137, .25);
    animation: sc-focus 2.6s ease-out;
}
@keyframes sc-focus {
    0%, 60% { box-shadow: 0 0 0 3px rgba(64, 81, 137, .35); }
    100%    { box-shadow: 0 0 0 3px rgba(64, 81, 137, 0); }
}
.sc-head { display: flex; gap: .6rem; align-items: flex-start; }
.sc-portrait {
    width: 64px;
    height: 79px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: -webkit-optimize-contrast;
}
.sc-title { min-width: 0; }
.sc-name { font-weight: 600; line-height: 1.25; word-break: keep-all; }
.sc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .25rem; }

/* 원본 ↔ SP — 같은 자리를 놓고 고르는 것이라 탭으로 붙인다 */
.sc-tabs { display: flex; gap: .25rem; margin: .5rem 0 .1rem; }
.sc-tab {
    padding: .1rem .5rem;
    border: 1px solid #dfe2e6;
    border-radius: .25rem;
    background: #fff;
    color: #878a99;
    font-size: .75rem;
    cursor: pointer;
}
.sc-tab.is-on { background: #405189; border-color: #405189; color: #fff; font-weight: 600; }
.soldier-grid.hide-sp .sc-tabs { display: none; }

.sc-line {
    display: flex;
    gap: .75rem;
    margin: .45rem 0 .3rem;
    font-size: .8125rem;
}
.sc-line span { display: inline-flex; align-items: center; gap: .2rem; }
.sc-line img { width: 20px; height: 20px; object-fit: contain; }

.sc-stats { width: 100%; margin: 0; font-size: .8125rem; }
.sc-stats th {
    font-weight: 500;
    color: #495057;
    padding: .12rem 0;
    white-space: nowrap;
}
.sc-stats th img { width: 16px; height: 16px; object-fit: contain; margin-right: .25rem; }
.sc-stats td { text-align: right; font-weight: 600; padding: .12rem 0; }

.sc-ability {
    margin-top: .45rem;
    padding-top: .45rem;
    border-top: 1px solid #f1f2f4;
    font-size: .78rem;
    line-height: 1.45;
    color: #495057;
    word-break: keep-all;
}

/* ── 용병 / 훈련 / 패시브 ─────────────────────────────────────────── */
.kind-tabs { display: flex; gap: .35rem; }
.kind-tab {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .8rem;
    border: 1px solid #e9ebec;
    border-radius: .3rem;
    background: #fff;
    color: #495057;
    font-size: .8125rem;
    cursor: pointer;
}
.kind-tab:hover { border-color: #405189; color: #405189; }
.kind-tab.is-on { background: #405189; border-color: #405189; color: #fff; font-weight: 600; }
.kind-tab em { font-style: normal; opacity: .65; font-size: .75rem; }

/* ── 훈련 · 패시브 카드 ───────────────────────────────────────────── */
.upgrade-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: .75rem;
}
.upgrade-card {
    border: 1px solid #e9ebec;
    border-radius: .4rem;
    background: #fff;
    padding: .6rem;
}
.uc-head { display: flex; gap: .6rem; align-items: center; }
.uc-icon { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.uc-name { font-weight: 600; word-break: keep-all; }
.uc-classes { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .2rem; }
.uc-effect {
    margin: .45rem 0;
    font-size: .8rem;
    line-height: 1.45;
    color: #495057;
    word-break: keep-all;
}
/* 재료표 — 랭크가 열, 재료가 행 */
.uc-cost {
    width: 100%;
    margin-top: .5rem;
    font-size: .75rem;
    border-collapse: collapse;
}
.uc-cost caption {
    caption-side: top;
    padding: .2rem 0;
    font-size: .75rem;
    color: #495057;
    text-align: left;
}
.uc-cost th, .uc-cost td {
    border: 1px solid #f1f2f4;
    padding: .12rem .3rem;
    text-align: center;
}
.uc-cost thead th { background: #f8f9fa; font-weight: 500; }
.uc-cost tbody th img { width: 26px; height: 26px; object-fit: contain; }

/* 카드 머리를 누르면 팝업이 뜬다 (soldier-modal.js) */
.sc-head.is-open { cursor: pointer; border-radius: .3rem; transition: background .12s; }
.sc-head.is-open:hover { background: #f3f6f9; }
.sc-head.is-open:hover .sc-name { color: #405189; }