/* キャラクター一覧・詳細ページ用。lp.css のトークンを前提にする */
.cgrid { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 14px;
         grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cgrid.small { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }

.ccard a { display: block; text-decoration: none; color: inherit; }
.ccard .thumb { display: block; position: relative; width: 100%; aspect-ratio: 1 / 1;
                border-radius: 12px; overflow: hidden; background: var(--card);
                border: 1px solid var(--line); }
.ccard .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ccard .thumb .noimg { position: absolute; inset: 0; display: flex; align-items: center;
                       justify-content: center; font-size: 34px; font-weight: 700;
                       color: var(--muted); opacity: .5; }
.ccard .cname { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.ccard .ctype { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }
.ccard .cmeta { display: block; font-size: 11px; color: var(--muted); line-height: 1.5; }
.cgrid.small .cname { font-size: 12px; }
.cgrid.small .ctype { font-size: 11px; }

.typelist { font-size: 13px; color: var(--muted); line-height: 2; }

.detail { margin: 18px 0 8px; }
.detail .hero { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1 / 1;
                object-fit: cover; border-radius: 14px; border: 1px solid var(--line);
                display: block; margin: 0 auto 18px; }

/* ぼかし処理をした写真であることをサムネイル上に明示する */
.ccard .thumb { position: relative; }
.masked-note {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: .02em;
}