/* ─────────────────────────────────────────────────────────────────────────
   각인 — 환령의 각인 · 만상 각인 (338, 2026-10-19)

   줄 꼴은 중앙율정(second-awaken.css)을 그대로 쓴다 — 8프로빌런님 의견
   "중앙 율정 목록처럼". 여기는 각인에만 있는 것만 더한다:
   칩(유형 · 첫 소환 대기 · 지속) · 오른쪽 해방 칸 · 사용 영웅 카드.
   ───────────────────────────────────────────────────────────────────────── */

.im-page-card > .card-header { border-bottom: 0; }

.im-icon { border-radius: .45rem; background: var(--ls-surface-2, rgba(0, 0, 0, .04)); }
.im-icon:hover { outline: none; }

.im-title { flex-basis: 12.5rem; }
.im-chips { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.im-chip {
    display: inline-block;
    font-size: .7rem;
    line-height: 1.5;
    padding: 0 .4rem;
    border-radius: 999px;
    border: 1px solid var(--ls-border);
    color: var(--ls-muted);
    white-space: nowrap;
}
.im-kind-summon { border-color: #4b8bdc; color: #2f6fbf; }
.im-kind-help { border-color: #3fa66b; color: #2c8a54; }
.im-cn { border-color: #d98b2b; color: #b86d10; }

/* 서브스킬 — 대표 효과 밑에 들여 붙인다 (소환 유닛이 따로 가진 스킬) */
.im-subs { margin-top: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.im-subskill { border-left: 3px solid var(--ls-border); padding-left: .6rem; }
.im-subskill-name { font-weight: 600; font-size: .82rem; margin-bottom: .1rem; display: flex; align-items: center; gap: .35rem; }
.im-subskill-name img { width: 28px; height: 28px; flex: 0 0 28px; }

/* 오른쪽 — 해방 스테이지 · 해방 조건 */
.im-meta { flex: 0 0 13rem; font-size: .78rem; line-height: 1.4; }
.im-meta-k { color: var(--ls-muted); margin-right: .3rem; }
.im-unlock { color: var(--ls-muted); margin-top: .2rem; word-break: keep-all; }

/* 편집 — 아이콘 미리보기 · 사용 영웅 고르는 목록 */
.im-icon-preview { width: 31px; height: 31px; object-fit: contain; border-radius: .3rem; flex: 0 0 31px; }
.im-picks { max-height: 55vh; overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; }
.im-pick { display: flex; align-items: center; gap: .5rem; padding: .2rem .35rem; border-radius: .3rem; cursor: pointer; margin: 0; }
.im-pick:hover { background: var(--ls-surface-2, rgba(0, 0, 0, .04)); }
.im-pick.is-draft span:first-of-type { opacity: .6; }

/* ?id= 로 열면 그 줄을 비춘다 (편집 이력 링크) */
.im-row.is-target { box-shadow: 0 0 0 2px var(--ls-primary); }

/* ── 사용 영웅 ─────────────────────────────────────────────────────────── */
.im-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.im-note { font-size: .75rem; color: var(--ls-muted); font-weight: 400; }
.im-heroes { display: flex; flex-wrap: wrap; gap: .5rem; }
.im-hero {
    display: flex; flex-direction: column; align-items: center;
    width: 82px; max-width: 100%; text-decoration: none; color: inherit;
}
.im-hero img { width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: .35rem; display: block; }
.im-hero:hover img { outline: 2px solid var(--ls-primary); }
.im-hero-name {
    font-size: .7rem; line-height: 1.2; margin-top: .2rem; text-align: center;
    width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.im-hero.is-draft img { opacity: .55; }

/* 좁은 화면 — 해방 칸도 아래로 내린다 */
@media (max-width: 991.98px) {
    .im-meta { flex: 1 1 100%; }
}

[data-bs-theme=dark] .im-kind-summon { color: #7fb0ec; }
[data-bs-theme=dark] .im-kind-help { color: #6fcf97; }
[data-bs-theme=dark] .im-cn { color: #f0b062; }