/* 캐릭터 카드 목록 (views/cards). 메인과 실시간 마도서가 같이 쓴다.
 * 색은 site.css 의 --clr-* 만 쓴다 — 라이트/다크가 그쪽에서 바뀐다. */

.cd-list [hidden], .cd-jdlg [hidden] { display: none !important; }
.cd-list { margin-top: .4rem; }

/* ── 진영 묶음 */
.cd-team { margin-top: 1.1rem; }
.cd-th {
    display: flex; align-items: center; gap: .5rem; margin: 0 0 .55rem;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--tc);
}
.cd-th::after { content: ""; flex: 1; height: 1px; background: var(--clr-border); }
.cd-n { font-weight: 600; color: var(--clr-muted); }

/* ── 캐릭터 칸: 그리드
 * 칸 전체가 링크처럼 눌리도록 .cd-link::after 가 칸을 덮고, 버튼(.cd-tools)만 그 위로 올린다. */
.cd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .5rem; }
.cd-card {
    position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0;
    padding: .65rem .4rem .55rem; border-radius: 12px; text-align: center;
    background: var(--clr-surface); border: 1px solid transparent; color: var(--clr-text);
    transition: border-color .12s;
}
.cd-card:hover { border-color: var(--tc); }
/* 메인은 카드 수백 장을 한 번에 그린다. 화면 밖 칸은 배치·그리기를 미루고 자리만 잡아 둔다
 * (auto: 한 번 그려진 칸은 실제 높이를 기억한다). 칸 밖으로 삐져나가는 자식이 없어야 한다. */
.cd-card { content-visibility: auto; contain-intrinsic-size: auto 120px; }
.cd-link {
    display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0;
    color: inherit; text-decoration: none;
}
.cd-link:hover { color: inherit; }
.cd-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cd-ic {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
    background: var(--clr-surface2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 35%, transparent);
}
.cd-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cd-tx { display: flex; flex-direction: column; min-width: 0; width: 100%; margin-top: .4rem; }
.cd-nm { font-size: .78rem; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-en { font-size: .64rem; color: var(--clr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ab { display: none; }
.cd-tag {
    position: absolute; top: .35rem; right: .35rem; padding: .12rem .3rem; border-radius: 4px;
    font-size: .56rem; font-weight: 700; line-height: 1; background: var(--clr-surface2); color: var(--clr-muted);
}

/* 징크스 · EN */
.cd-tools { position: relative; z-index: 1; display: flex; justify-content: center; gap: .25rem; margin-top: .45rem; }
.cd-tool {
    height: 22px; padding: 0 .5rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
    font: inherit; font-size: .64rem; font-weight: 700; line-height: 1;
    background: var(--clr-surface2); border: 1px solid var(--clr-border); color: var(--clr-muted);
}
.cd-tool:hover { color: var(--clr-text); border-color: var(--clr-accent); }
.cd-jx { color: var(--clr-fabled); border-color: color-mix(in srgb, var(--clr-fabled) 40%, transparent); }
.cd-lang[aria-pressed="true"] { color: var(--clr-text); border-color: var(--clr-accent); background: color-mix(in srgb, var(--clr-accent) 18%, var(--clr-surface2)); }
.cd-tool:disabled { opacity: .6; cursor: progress; }

/* ── 캐릭터 칸: 리스트 */
.cd-list[data-view="list"] .cd-grid { grid-template-columns: 1fr; gap: .4rem; }
@media (min-width: 1100px) { .cd-list[data-view="list"] .cd-grid { grid-template-columns: 1fr 1fr; } }
.cd-list[data-view="list"] .cd-card {
    flex-direction: row; align-items: flex-start; gap: .6rem; padding: .7rem .8rem .7rem .9rem; text-align: left;
    box-shadow: inset 3px 0 0 var(--tc);
}
.cd-list[data-view="list"] .cd-link { flex-direction: row; align-items: flex-start; gap: .8rem; flex: 1; }
.cd-list[data-view="list"] .cd-ic { width: 48px; height: 48px; }
.cd-list[data-view="list"] .cd-tx { margin-top: 0; display: block; }
.cd-list[data-view="list"] .cd-nm { display: inline; font-size: .9rem; }
.cd-list[data-view="list"] .cd-en { display: inline; margin-left: .4rem; font-size: .72rem; }
.cd-list[data-view="list"] .cd-ab {
    display: block; margin-top: .25rem; font-size: .8rem; line-height: 1.5; color: var(--clr-muted); white-space: normal;
}
.cd-list[data-view="list"] .cd-tools { margin-top: 0; flex-shrink: 0; }
.cd-list[data-view="list"] .cd-tag { position: static; flex-shrink: 0; align-self: center; }

/* ── 징크스 창 */
.cd-jdlg {
    position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100dvh - 32px); overflow: auto;
    width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--clr-border); border-radius: 16px;
    background: var(--clr-bg); color: var(--clr-text);
}
.cd-jdlg::backdrop { background: rgba(0, 0, 0, .6); }
.cd-jhead {
    position: sticky; top: 0; display: flex; align-items: center; gap: .5rem; padding: .9rem 1rem;
    background: var(--clr-bg); border-bottom: 1px solid var(--clr-border);
}
.cd-jhead h2 { flex: 1; margin: 0; font-size: 1rem; font-weight: 800; }
.cd-jhead h2 small { margin-left: .35rem; font-size: .75rem; font-weight: 600; color: var(--clr-muted); }
.cd-jclose { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--clr-muted); font-size: 1.1rem; cursor: pointer; }
.cd-jclose:hover { color: var(--clr-text); background: var(--clr-surface2); }
.cd-jbody { padding: .4rem 1rem 1rem; }
.cd-jitem { padding: .7rem 0; border-bottom: 1px solid var(--clr-border); }
.cd-jitem:last-child { border-bottom: 0; }
.cd-jitem b { display: block; font-size: .88rem; }
.cd-jitem p { margin: .25rem 0 0; font-size: .82rem; line-height: 1.6; color: var(--clr-muted); }
.cd-jmsg { margin: 1rem 0; text-align: center; color: var(--clr-muted); font-size: .85rem; }

/* ── 고르는 화면(온라인 마도서): 골라진 카드. 색은 목록의 --pick / --pick-ink 를 따른다. */
.cd-card.is-picked {
    border-color: var(--pick, var(--clr-accent));
    background: color-mix(in srgb, var(--pick, var(--clr-accent)) 14%, var(--clr-surface));
}
.cd-card.is-picked .cd-ic { box-shadow: 0 0 0 2px var(--pick, var(--clr-accent)); }
.cd-card.is-picked::before {
    content: "\2713"; position: absolute; top: .35rem; left: .35rem; z-index: 1;
    width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    font-size: .65rem; font-weight: 800; color: var(--pick-ink, #fff); background: var(--pick, var(--clr-accent));
}