/* 부유성 대화 (2026-10-08 요청)
   영웅 상세의 영웅담(.ht-block)과 **같은 모양**으로 접었다 편다 — 한 영웅이 241줄까지
   있어 펼쳐 두면 화면이 글로 덮인다. 두 사람이 주고받는 말이라 말하는 사람을 왼쪽에 세운다. */
.fd-block { margin-bottom: .75rem; }
.fd-block > summary {
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.fd-block > summary::-webkit-details-marker { display: none; }
.fd-block > summary::before { content: '▸'; font-size: .75rem; }
.fd-block[open] > summary::before { content: '▾'; }
.fd-block > summary em {
    font-style: normal;
    font-weight: 400;
    font-size: .8125rem;
    color: var(--vz-text-muted);
}
.fd-table th {
    width: 7rem;
    font-weight: 600;
    color: var(--vz-heading-color);
}
/* 영웅 목록 — 길어서 혼자 구른다 (화면이 좁으면 접힌 자리만큼만) */
.fd-heroes {
    max-height: 70vh;
    overflow-y: auto;
}
.fd-heroes .list-group-item.active .badge {
    background-color: rgba(255, 255, 255, .25) !important;
    color: #fff !important;
}
/* 좁은 화면 — 목록이 대화 위에 서므로, 영웅을 골랐으면 접는다 (2026-10-12 제보).
   전에는 목록(70vh)을 다 지나 내려가야 대화가 나왔다. 접으면 머리줄 하나만 남고
   '영웅 바꾸기' 로 다시 편다. lg(992px) 이상은 나란히라 접지 않는다 — 단추도 d-lg-none. */
@media (max-width: 991.98px) {
    /* !important — 도구 줄이 d-flex(display:flex !important)라 그냥은 안 숨는다 */
    .fd-list-card.is-folded .fd-list-body,
    .fd-list-card.is-folded .fd-list-tools { display: none !important; }
    .fd-heroes { max-height: 60vh; }
}
/* 제목의 영웅 이름 — 누르면 '영웅 바꾸기' 와 같다 (2026-10-12 요청). 제목 글꼴 그대로 두고
   점선 밑줄로만 누를 수 있다는 것을 알린다 */
.fd-title-btn {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline dotted;
    text-underline-offset: .2em;
    cursor: pointer;
}
/* 이름이 있는 머리줄 전체가 누르는 자리다 (2026-10-12 요청 "영웅이름 있는 탭 클릭하면 접는 식으로").
   고른 영웅이 있을 때만 JS 가 붙인다. 대사 검색 칸은 제 모양(글 커서) 그대로 */
.fd-talk-head { cursor: pointer; }
.fd-talk-head input { cursor: text; }
/* 단추는 ms-auto 대신 여기서 오른쪽으로 민다 — mobile.css 가 카드 머리의 .ms-auto 를
   폭 100% 로 늘려(검색창 때문에) 단추가 한 줄을 다 먹었다 */
.fd-list-toggle { margin-left: auto; }