.character-card-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .character-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .character-card-grid {
    /* 情報量の多いカードのため最大3列（ワイド画面でも4列にしない） */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.character-card {
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.character-card--linked {
  position: relative;
  cursor: pointer;
}

.character-card--linked .cc-card-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  text-indent: -9999px;
  overflow: hidden;
}

.character-card--linked .cc-name-link,
.character-card--linked .cc-img-link {
  position: relative;
  z-index: 4;
}

.character-card--linked .cc-card-footer,
.character-card--linked .cc-skill-slot-details,
.character-card--linked .cc-skill-slot-summary {
  position: relative;
  z-index: 4;
}

.character-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.cc-header {
  color: #fff;
  padding: 0.625rem 1rem;
}

.cc-header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
}

.cc-name-link {
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

.cc-name {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: #fff;
}

.cc-rare {
  color: #fde047;
  font-weight: 700;
}

.cc-shozoku-pill {
  font-size: 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
}

.cc-meisho {
  background: #facc15;
  color: #713f12;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
}

.cc-season {
  background: rgba(255, 255, 255, 0.92);
  color: #0f766e;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.125rem 0.45rem;
  border-radius: 0.375rem;
  letter-spacing: 0.02em;
}

.cc-body {
  padding: 0.65rem 0.85rem 0.85rem;
  color: #111827;
}

.cc-visual {
  display: flex;
  justify-content: center;
  margin-bottom: 0.65rem;
}

.cc-portrait-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.cc-img-link {
  display: block;
  flex-shrink: 0;
}

.cc-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 0.5rem;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .cc-img {
    width: 96px;
    height: 96px;
  }
}

.cc-heishu-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.25rem;
  max-width: 100%;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, #7c3aed, #9333ea);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.cc-heishu-name {
  white-space: nowrap;
}

.cc-heishu-dot {
  opacity: 0.75;
}

.cc-heishu-effect {
  font-weight: 600;
  opacity: 0.95;
}

/* 編集フォーム用（character-edit.js） */
.cc-heishu-box {
  width: 80px;
  height: 80px;
  background: #a855f7;
  color: #fff;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .cc-heishu-box {
    width: 100px;
    height: 100px;
  }
}

.cc-heishu-title {
  font-size: 0.8rem;
  font-weight: 700;
}

.cc-heishu-sub {
  font-size: 0.65rem;
  margin-top: 0.25rem;
}

.cc-stats {
  margin-bottom: 0.5rem;
}

.cc-stat-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.3rem;
}

.cc-stat-label {
  width: 1.25rem;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.cc-stat-bar {
  flex: 1;
  height: 1.25rem;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

.cc-stat-fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0.35rem;
  min-width: 2px;
  transition: width 0.3s;
}

.cc-stat-val {
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.cc-stat-max {
  width: 2rem;
  text-align: right;
  font-size: 0.65rem;
  color: #6b7280;
  flex-shrink: 0;
}

.cc-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  background: #f9fafb;
  border: 1px solid #eef2f7;
  border-radius: 0.5rem;
  padding: 0.45rem 0.35rem;
  margin: 0.5rem 0 0.65rem;
}

.cc-status-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
}

.cc-status-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.02em;
}

.cc-status-cell .status-badge {
  max-width: 100%;
  white-space: nowrap;
}

/* 編集フォーム用（character-edit.js） */
.cc-chain {
  background: #f9fafb;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  margin: 0.75rem 0;
  font-size: 0.7rem;
}

.cc-chain-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  margin-bottom: 0.25rem;
}

.cc-chain-label {
  font-weight: 600;
  color: #4b5563;
  width: 2.5rem;
}

.cc-chain-arrow,
.cc-chain-muted {
  color: #9ca3af;
}

.status-badge {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
}

.status-float {
  background: #3b82f6;
}
.status-fall {
  background: #ef4444;
}
.status-kb {
  background: #a855f7;
}
.status-none {
  background: #6b7280;
}

.cc-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.cc-skill {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.cc-skill-desc {
  font-weight: 400;
}

/* 詳細ページ */
.character-detail-wrap {
  max-width: 420px;
  margin: 0 auto 1.5rem;
}

.related-cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .related-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .related-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* renderCompact — 編成ツール・掲示板編成プレビュー共通 */
.cc-compact {
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 2px solid #6b7280;
  background: #fff;
}

.cc-compact-locked {
  opacity: 0.55;
  filter: grayscale(0.6);
}

.cc-compact-saved {
  border-color: #facc15;
}

.cc-compact-header {
  padding: 0.25rem 0.35rem;
}

.cc-compact-name {
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  text-decoration: none;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-compact-body {
  padding: 0.35rem;
  display: flex;
  gap: 0.35rem;
  align-items: flex-start;
}

.cc-compact-img {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: 0.25rem;
  flex-shrink: 0;
}

.cc-compact-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  font-size: 0.65rem;
}

.cc-compact-rare {
  color: #ca8a04;
  font-weight: 700;
}

.cc-compact-shozoku,
.cc-compact-heishu {
  background: #374151;
  color: #fff;
  padding: 0 0.2rem;
  border-radius: 0.15rem;
}

.cc-compact-heishu {
  background: #7c3aed;
}

.cc-compact-chain {
  font-size: 0.6rem;
  margin-top: 0.15rem;
}

.cc-compact-arrow {
  color: #9ca3af;
  margin: 0 0.1rem;
}

.cc-compact-lock-badge,
.cc-compact-saved-badge {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  z-index: 2;
  font-size: 0.75rem;
}

/* 掲示板編成プレビュー（2列・コンパクトだが画像・所属・兵種・状態を表示） */
.cc-compact--olb .cc-compact-header--olb {
  padding: 0.25rem 0.35rem;
}

.cc-compact--olb .cc-compact-olb-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.3rem;
}

.cc-compact--olb .cc-compact-name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.84rem;
  text-align: left;
}

.cc-compact--olb .cc-compact-olb-shozoku {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-compact--olb .cc-compact-body--olb {
  display: flex;
  gap: 0.3rem;
  align-items: flex-start;
  padding: 0.35rem;
}

.cc-compact--olb .cc-compact-img {
  width: 2.4rem;
  height: 2.4rem;
}

.cc-compact--olb .cc-compact-olb-main {
  flex: 1 1 0;
  min-width: 0;
}

.cc-compact--olb .cc-compact-meta {
  font-size: 0.7rem;
  gap: 0.15rem;
}

.cc-compact--olb .cc-compact-heishu {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cc-compact--olb .cc-compact-chain {
  margin-top: 0.12rem;
  font-size: 0.62rem;
  line-height: 1.3;
}

/* ===== 案B: 横長チケット ===== */
.character-list--ticket {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.cc-ticket {
  position: relative;
  background: #fff;
  border-radius: 0.65rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
  overflow: hidden;
}

.cc-ticket-accent {
  height: 4px;
}

.cc-ticket-body {
  display: flex;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem 0.75rem;
  align-items: flex-start;
}

.cc-ticket-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.cc-ticket-main {
  flex: 1 1 0;
  min-width: 0;
}

.cc-ticket-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  margin-bottom: 0.35rem;
}

.cc-ticket-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: anywhere;
  flex: 0 1 auto;
  min-width: 0;
}

.cc-ticket-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
}

.cc-ticket-badges .cc-rare {
  color: #ca8a04;
}

.cc-ticket-badges .cc-shozoku-pill {
  background: #374151;
  color: #fff;
  font-size: 0.65rem;
}

.cc-ticket-badges .cc-meisho {
  font-size: 0.62rem;
  padding: 0.1rem 0.35rem;
}

.cc-ticket-badges .cc-season {
  font-size: 0.62rem;
  padding: 0.1rem 0.35rem;
}

.cc-ticket .cc-heishu-chip {
  margin-bottom: 0.35rem;
  font-size: 0.62rem;
}

.cc-ticket .cc-status-grid {
  margin: 0.35rem 0;
  padding: 0.35rem 0.25rem;
  gap: 0.2rem;
}

.cc-ticket .cc-status-label {
  font-size: 0.58rem;
}

.cc-ticket .cc-status-cell .status-badge {
  font-size: 0.58rem;
  padding: 0.1rem 0.25rem;
}

/* ===== 案D: タイル ===== */
.character-list--tile {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (min-width: 480px) and (max-width: 767px) {
  .character-list--tile {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.character-card-item--tile {
  list-style: none;
  min-width: 0;
}

.cc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0.35rem 0.25rem 0.45rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.55rem;
  background: #fff;
  cursor: pointer;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.cc-tile-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.cc-tile-img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 0.35rem;
  margin-top: 0.15rem;
}

.cc-tile-name {
  margin-top: 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.25;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
}

.cc-tile-rare {
  font-size: 0.58rem;
  color: #ca8a04;
  font-weight: 700;
}

/* renderPortrait — 名前＋ポートレート */
a.cc-portrait,
.cc-portrait {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 2px solid #6b7280;
  border-radius: 0.55rem;
  background: #fff;
  text-align: center;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  color: inherit;
}

a.cc-portrait:hover {
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.16);
}

.cc-portrait-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, #374151, #4b5563);
}

.cc-portrait-head {
  padding: 0.45rem 0.4rem 0.4rem;
  background: linear-gradient(to right, #374151, #4b5563);
}

.cc-portrait[data-shozoku='蜀'] .cc-portrait-accent,
.cc-portrait[data-shozoku='蜀'] .cc-portrait-head {
  background: linear-gradient(to right, #16a34a, #22c55e);
}

.cc-portrait[data-shozoku='魏'] .cc-portrait-accent,
.cc-portrait[data-shozoku='魏'] .cc-portrait-head {
  background: linear-gradient(to right, #2563eb, #3b82f6);
}

.cc-portrait[data-shozoku='呉'] .cc-portrait-accent,
.cc-portrait[data-shozoku='呉'] .cc-portrait-head {
  background: linear-gradient(to right, #dc2626, #ef4444);
}

.cc-portrait[data-shozoku='群'] .cc-portrait-accent,
.cc-portrait[data-shozoku='群'] .cc-portrait-head {
  background: linear-gradient(to right, #9333ea, #a855f7);
}

.cc-portrait[data-shozoku='野'] .cc-portrait-accent,
.cc-portrait[data-shozoku='野'] .cc-portrait-head {
  background: linear-gradient(to right, #f59e0b, #fbbf24);
}

.cc-portrait-name {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc-portrait-body {
  display: flex;
  justify-content: center;
  padding: 0.35rem 0.4rem 0.45rem;
}

.cc-portrait-img {
  width: 2.75rem;
  height: 2.75rem;
  object-fit: cover;
  border-radius: 0.3rem;
  flex-shrink: 0;
}

/* ===== 案E: レール ===== */
.character-list--rail {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cc-rail {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.cc-rail-top {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.cc-rail-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 0.4rem;
  border: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.cc-rail-meta {
  flex: 1 1 0;
  min-width: 0;
}

.cc-rail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  margin-bottom: 0.25rem;
}

.cc-rail-name {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
}

.cc-rail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
}

.cc-rail-badges .cc-rare {
  color: #ca8a04;
}

.cc-rail-badges .cc-shozoku-pill {
  background: #374151;
  color: #fff;
  font-size: 0.65rem;
}

.cc-rail-detail-link {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  padding: 0.25rem 0.45rem;
  border: 1px solid #bfdbfe;
  border-radius: 0.35rem;
  position: relative;
  z-index: 4;
}

.cc-rail .cc-heishu-chip {
  font-size: 0.62rem;
  margin-bottom: 0.25rem;
}

.cc-mini-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  font-size: 0.62rem;
  color: #6b7280;
}

.cc-mini-stats span {
  font-weight: 600;
}

.cc-rail-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  padding: 0.45rem 0.5rem;
  background: linear-gradient(90deg, #f8fafc, #f1f5f9);
  border-radius: 0.45rem;
  margin-bottom: 0.45rem;
}

.cc-rail-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}

.cc-rail-node-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: #64748b;
}

.cc-rail-arrow {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
}

.cc-skills--summary {
  margin-top: 0;
}

.cc-skills-more {
  font-size: 0.62rem;
  color: #6b7280;
  align-self: center;
}

/* ドロワー（案D） */
.character-drawer-open {
  overflow: hidden;
}

.character-drawer[hidden] {
  display: none;
}

.character-drawer {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.character-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.character-drawer-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  background: #fff;
  border-radius: 1rem 1rem 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.character-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.35rem;
  border-bottom: 1px solid #e5e7eb;
}

.character-drawer-title {
  margin: 0;
  font-size: 1rem;
}

.character-drawer-close {
  border: none;
  background: #f3f4f6;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.character-drawer-body {
  overflow: auto;
  padding: 0.75rem 1rem;
}

.character-drawer-body .character-card {
  box-shadow: none;
}

.character-drawer-footer {
  padding: 0.65rem 1rem 1rem;
  margin: 0;
  border-top: 1px solid #e5e7eb;
}

.character-drawer-footer .btn {
  display: block;
  text-align: center;
}

.character-drawer-footer--actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.character-drawer-footer--actions .btn {
  flex: 1 1 calc(50% - 0.25rem);
  min-width: 0;
}

.character-detail-actions {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
}

.character-detail-actions .btn {
  display: inline-block;
}

.character-detail-actions .meta-text {
  margin: 0.65rem 0 0;
}

/* 武将詳細：編成ハブ（旧コンボ接続・関連武将を統合） */
.char-formation-hub {
  margin-top: 1.25rem;
}

.char-formation-hub-details {
  padding: 0;
  overflow: hidden;
}

.char-formation-hub--prominent {
  border: 2px solid #16a34a;
  box-shadow: 0 8px 28px rgba(22, 163, 74, 0.14);
  background: linear-gradient(165deg, #ecfdf5 0%, #fff 42%, #f8fafc 100%);
}

.char-formation-hub--prominent .char-formation-hub-summary {
  padding: 1.15rem 1.25rem 1.05rem;
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 55%, #fff 100%);
  border-bottom: 1px solid #bbf7d0;
}

.char-formation-hub--prominent .char-formation-hub-summary .section-title {
  font-size: 1.35rem;
  color: #14532d;
}

.char-formation-hub--prominent .char-formation-hub-tagline {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #15803d;
}

.char-formation-hub-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.char-formation-hub-summary .section-title {
  margin: 0;
}

.char-formation-hub-summary-inner {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.char-formation-hub-summary::-webkit-details-marker {
  display: none;
}

.char-formation-hub-summary::after {
  content: '▸';
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.75rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.char-formation-hub-details[open] > .char-formation-hub-summary::after {
  transform: rotate(90deg);
}

.char-formation-hub-head {
  padding: 1.15rem 1.25rem 0.85rem;
  background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 55%, #fff 100%);
  border-bottom: 1px solid #bbf7d0;
}

.char-formation-hub-head .section-title {
  margin: 0;
  font-size: 1.35rem;
  color: #14532d;
}

.char-formation-hub--prominent .char-formation-hub-head .section-title {
  font-size: 1.35rem;
  color: #14532d;
}

.char-formation-hub-head .char-formation-hub-tagline {
  margin: 0.2rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: #15803d;
}

.char-formation-hub-head .char-formation-lead {
  margin: 0.45rem 0 0;
}

.char-formation-hub-sections {
  padding: 0.85rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.char-formation-fold {
  border: 1px solid #dbeafe;
  border-radius: 0.65rem;
  background: #fff;
  overflow: hidden;
}

.char-formation-fold--solo {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.char-formation-fold--partners {
  border-color: #e2e8f0;
}

.char-formation-fold-summary {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: #0f172a;
}

.char-formation-fold-summary::-webkit-details-marker {
  display: none;
}

.char-formation-fold-summary::after {
  content: '▸';
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.75rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.char-formation-fold[open] > .char-formation-fold-summary::after {
  transform: rotate(90deg);
}

.char-formation-fold-title {
  min-width: 0;
}

.char-formation-fold-meta {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 9999px;
  padding: 0.12rem 0.45rem;
}

.char-formation-fold-body {
  padding: 0 0.9rem 0.9rem;
  border-top: 1px solid #e2e8f0;
}

.char-formation-fold-body > .meta-text:first-child {
  margin-top: 0.65rem;
}

.char-formation-empty--inline {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border: 1px dashed #cbd5e1;
  border-radius: 0.55rem;
  background: #f8fafc;
}

.char-formation-fold .char-formation-primary {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.char-formation-fold .char-formation-skilltag-block {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e8f0;
}

.char-formation-fold .char-formation-partners {
  margin-top: 0.65rem;
}

.char-formation-fold-hint {
  margin: 0.65rem 0 0;
  color: #64748b;
}

/* 編成を探す — ナビ子ステージ（カード内） */

.char-formation-hub-navigator {
  padding: 0.85rem 1.1rem 0;
}

/* 編成を探す — アイコングリッド（トップページの home-app と同形式） */

.char-formation-apps {
  margin: 0;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}

.char-formation-app {
  position: relative;
}

.char-formation-app.is-active {
  border-color: #16a34a;
  background-color: #ecfdf5;
  box-shadow:
    0 2px 10px rgba(22, 163, 74, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* しっぽの位置・色を編成パネル（gap 0.55rem / 枠 #bbf7d0）に合わせる */
.char-formation-app[aria-expanded='true']::after {
  bottom: -1rem;
  border-top-color: #bbf7d0;
  border-left-color: #bbf7d0;
}

.home-app-icon--cf-solo {
  background-color: #16a34a;
}

.home-app-icon--cf-gattai {
  background-color: #d97706;
}

.home-app-icon--cf-partners {
  background-color: #2563eb;
}

.char-formation-app-count {
  position: absolute;
  top: 0.3rem;
  right: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: #0369a1;
  background: #e0f2fe;
  border-radius: 9999px;
  padding: 0.1rem 0.4rem;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
}

.char-formation-panels:has(.char-formation-panel:not([hidden])) {
  margin-top: 0;
}

.char-formation-panel {
  border: 1px solid #bbf7d0;
  border-radius: 0.65rem;
  background: #fff;
  padding: 0.75rem 0.9rem 0.9rem;
}

.char-formation-panel > .meta-text:first-child {
  margin-top: 0;
}

.char-formation-panel .char-formation-primary {
  margin-top: 0;
  margin-bottom: 0;
}

.char-formation-panel .char-formation-skilltag-block {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid #e2e8f0;
}

.char-formation-panel .char-formation-partners {
  margin-top: 0.65rem;
}

.char-formation-hub-body {
  padding: 0 1.1rem 1.1rem;
  border-top: 1px solid #e2e8f0;
}

.char-formation-partners-actions {
  margin-top: 0.5rem;
}

.char-formation-lead {
  margin: 0.35rem 0 0.85rem;
}

.char-formation-primary {
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.65rem;
  margin-bottom: 1.1rem;
}

.char-formation-self-rail {
  margin-bottom: 0.75rem;
}

.char-formation-primary-actions .btn {
  width: 100%;
  text-align: center;
}

.char-formation-hub--prominent .char-formation-primary-actions .btn {
  padding: 0.85rem 1.1rem;
  font-size: 1.02rem;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(22, 163, 74, 0.2);
}

.char-formation-hub--prominent .char-formation-primary {
  background: #fff;
  border-color: #bbf7d0;
}

.char-formation-gattai-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.char-formation-gattai-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  background: #fff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  line-height: 1.35;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.char-formation-gattai-tab:hover {
  border-color: #16a34a;
  background: #f0fdf4;
}

.char-formation-gattai-tab.is-active {
  border-color: #16a34a;
  background: #dcfce7;
  color: #14532d;
}

.char-formation-gattai-tab-count {
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #15803d;
  background: #ecfdf5;
  border: 1px solid #bbf7d0;
  border-radius: 9999px;
  padding: 0.05rem 0.4rem;
  line-height: 1.3;
}

.char-formation-gattai-tab.is-active .char-formation-gattai-tab-count {
  color: #14532d;
  background: #fff;
  border-color: #86efac;
}

.char-formation-gattai-tab-hint {
  margin: 0.35rem 0 0.15rem;
}

.char-formation-gattai-tab-panels {
  margin-top: 0.35rem;
}

.char-formation-gattai-panel[hidden] {
  display: none !important;
}

.char-formation-available-gattai {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.char-formation-gattai-list-label {
  margin: 0 0 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
}

.char-formation-available-gattai-list {
  display: grid;
  gap: 0.65rem;
}

.char-formation-gattai-row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background: #fff;
}

.char-formation-gattai-row-main {
  min-width: 0;
}

.char-formation-partner-gattai .char-formation-gattai-apt {
  margin-left: auto;
}

.char-formation-gattai-candidate-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
  white-space: nowrap;
}

.char-formation-required-anchor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  margin: 0.35rem 0 0.5rem;
  padding: 0.45rem 0.55rem;
  border-radius: 0.375rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.char-formation-required-anchor-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
  white-space: nowrap;
}

.char-formation-required-anchor-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.char-formation-required-anchor-btn {
  border: 1px solid #cbd5e1;
  border-radius: 9999px;
  background: #fff;
  color: #334155;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  cursor: pointer;
  line-height: 1.35;
}

.char-formation-required-anchor-btn:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}

.char-formation-required-anchor-btn.is-active {
  border-color: #0369a1;
  background: #e0f2fe;
  color: #0c4a6e;
}

.char-formation-gattai-item + .char-formation-gattai-item {
  margin-top: 0.65rem;
}

.char-formation-gattai-apt {
  font-size: 0.72rem;
  font-weight: 600;
  color: #0369a1;
  background: #e0f2fe;
  padding: 0.1rem 0.45rem;
  border-radius: 9999px;
}

.char-formation-gattai-solo {
  margin: 0;
  font-size: 0.75rem;
}

.char-formation-block + .char-formation-block {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid #e5e7eb;
}

.char-formation-subtitle {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 700;
}

.char-formation-partners {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.65rem;
}

.char-formation-partners-intro-lead {
  margin: 0 0 0.65rem;
}

.char-formation-partners-list {
  display: grid;
  gap: 0.65rem;
}

.char-formation-partner-group {
  margin-bottom: 1rem;
}

.char-formation-partner-group:last-child {
  margin-bottom: 0;
}

.char-formation-partner-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem 0.75rem;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.45rem;
  border-radius: 0.45rem;
  background: linear-gradient(to right, #fef3c7, #fffbeb);
  border: 1px solid #fcd34d;
}

.char-formation-partner-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.55rem;
  min-width: 0;
}

.char-formation-partner-group-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 800;
  color: #92400e;
}

.char-formation-partner-group-apt {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b45309;
}

.char-formation-partner-group-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: #78716c;
}

.char-formation-partner-group-btn {
  white-space: nowrap;
  font-size: 0.78rem;
  padding: 0.4rem 0.7rem;
}

.char-formation-partner-group-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.char-formation-partner {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-left-width: 3px;
  border-radius: 0.5rem;
  background: #fff;
}

.char-formation-partner--connect-out {
  border-left-color: #60a5fa;
}

.char-formation-partner--connect-in {
  border-left-color: #fb923c;
}

.char-formation-partner--connect-both {
  border-left-color: #a78bfa;
}

.char-formation-partner-main {
  min-width: 0;
}

.char-formation-partner-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding-top: 0.45rem;
  border-top: 1px solid #eef2f7;
}

.char-formation-partner-skills {
  flex: 1 1 6rem;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.char-formation-partner-skills-label {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.char-formation-partner-skills-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  min-width: 0;
}

@media (min-width: 720px) {
  .char-formation-partner-toolbar {
    flex-wrap: nowrap;
  }
}

.char-formation-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.char-formation-partner-cards {
  margin-bottom: 0.15rem;
}

.char-formation-partner-gattai {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.6rem;
  padding: 0.38rem 0.55rem;
  margin-bottom: 0.45rem;
  border-radius: 0.45rem;
  background: linear-gradient(to right, #fef3c7, #fffbeb);
  border: 1px solid #fcd34d;
}

.char-formation-partner-gattai-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  color: #b45309;
  letter-spacing: 0.04em;
}

.char-formation-partner-gattai-value {
  font-size: 0.82rem;
  font-weight: 700;
  color: #92400e;
  line-height: 1.35;
}

@media (min-width: 520px) {
  .char-formation-partner-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.char-formation-slot {
  position: relative;
  min-width: 0;
}

.char-formation-slot--filled .cc-compact {
  height: 100%;
}

.char-formation-slot-badge {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.12rem 0.38rem;
  border-radius: 0.25rem;
  background: #0f766e;
  color: #fff;
  line-height: 1.2;
  pointer-events: none;
}

.char-formation-slot--blank {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 7.25rem;
  border: 2px dashed #d1d5db;
  border-radius: 0.5rem;
  background: #f9fafb;
}

.char-formation-slot-blank-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #9ca3af;
}

.char-formation-partner-id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
}

.char-formation-partner-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
  text-decoration: none;
}

.char-formation-partner-name:hover {
  color: var(--primary, #2563eb);
  text-decoration: underline;
}

.char-formation-partner-shozoku {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748b;
}

.char-formation-partner-scorebox {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.15rem;
}

.char-formation-partner-score-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: #334155;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
}

.char-formation-partner-score-hero {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: #0f766e;
}

.char-formation-partner-scorebox--multi {
  flex: 0 0 auto;
  min-width: 7.5rem;
}

.char-formation-partner-score-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.2rem 0.35rem;
  margin-top: 0.15rem;
}

.char-formation-partner-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.char-formation-partner-score-item-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  line-height: 1.2;
}

.char-formation-partner-score-item-value {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.1;
  color: #0f766e;
}

.char-formation-partner-btn {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 10.5rem;
  box-sizing: border-box;
  white-space: normal;
  line-height: 1.3;
  text-align: center;
  font-size: 0.75rem;
  padding: 0.45rem 0.6rem;
  gap: 0.05rem;
}

.char-formation-partner-btn-names {
  display: block;
}

.char-formation-partner-btn-suffix {
  display: block;
  font-size: 0.7rem;
}

.char-formation-partner-skill {
  display: inline-block;
  margin: 0;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  background: #f1f5f9;
  font-size: 0.72rem;
  color: #475569;
}

.char-formation-partner-skill--status {
  background: #ede9fe;
  color: #5b21b6;
}

.char-formation-partner-skill--trigger {
  background: #ffedd5;
  color: #c2410c;
}

.char-formation-partner-skill--giType {
  background: #dcfce7;
  color: #166534;
}

.char-formation-partner-muted {
  color: #94a3b8;
  font-size: 0.75rem;
}

.char-formation-partner-connect {
  margin-top: 0.35rem;
}

.char-formation-partner-connect-summary {
  font-size: 0.72rem;
  color: #64748b;
  cursor: pointer;
  list-style: none;
}

.char-formation-partner-connect-summary::-webkit-details-marker {
  display: none;
}

.char-formation-partner-connect-summary::before {
  content: '▸ ';
  color: #94a3b8;
}

.char-formation-partner-connect[open] .char-formation-partner-connect-summary::before {
  content: '▾ ';
}

.char-formation-partner-connect .char-formation-connect-flows {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.char-formation-connect-flow {
  padding: 0.4rem 0.5rem;
  border-radius: 0.35rem;
  border: 1px solid #eef2f7;
  background: #fafafa;
  font-size: 0.75rem;
}

.char-formation-connect-flow--out {
  border-left: 2px solid #60a5fa;
}

.char-formation-connect-flow--in {
  border-left: 2px solid #fb923c;
}

.char-formation-connect-route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.3rem;
  font-weight: 700;
}

.char-formation-connect-node--self {
  color: #166534;
}

.char-formation-connect-node--partner {
  color: #334155;
}

.char-formation-connect-arrow {
  color: #94a3b8;
}

.char-formation-connect-hints {
  margin: 0.25rem 0 0;
  padding-left: 1rem;
  color: #64748b;
}

.char-formation-connect-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  border: 1px solid transparent;
}

.char-formation-connect-badge--out {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.char-formation-connect-badge--in {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #c2410c;
}

.char-formation-connect-badge--both {
  background: #f5f3ff;
  border-color: #ddd6fe;
  color: #6d28d9;
}

.char-formation-empty {
  margin: 0.5rem 0 0;
}

.char-formation-gattai-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.char-formation-gattai-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.char-formation-gattai-btn {
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
}

.char-formation-gattai-peers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.char-formation-gattai-chip {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
}

.char-formation-gattai-chip:hover {
  background: #e2e8f0;
}

.char-formation-gattai-more {
  font-size: 0.75rem;
}

/* 合体技・スキルタグ共通プリセット行 */
.char-formation-preset-group + .char-formation-preset-group {
  margin-top: 0.85rem;
}

.char-formation-preset-cat {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
}

.char-formation-preset-cat-hint {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: #94a3b8;
}

.char-formation-preset-item + .char-formation-preset-item {
  margin-top: 0.65rem;
}

.char-formation-preset-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.char-formation-preset-title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}

.char-formation-preset-tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #065f46;
}

.char-formation-preset-count {
  font-size: 0.72rem;
  color: #64748b;
}

.char-formation-preset-name {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
}

.char-formation-preset-btn {
  font-size: 0.78rem;
  padding: 0.35rem 0.65rem;
}

.char-formation-preset-peers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.char-formation-preset-chip {
  display: inline-block;
  padding: 0.25rem 0.55rem;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
  text-decoration: none;
}

.char-formation-preset-chip:hover {
  background: #e2e8f0;
}

.char-formation-preset-more {
  font-size: 0.75rem;
}

@media (min-width: 768px) {
  .character-drawer-panel {
    left: 50%;
    right: auto;
    bottom: 50%;
    transform: translate(-50%, 50%);
    width: min(420px, 92vw);
    max-height: 85vh;
    border-radius: 1rem;
  }
}

/* ===== 案A': 洗練カード v2 ===== */
.character-card--v2 {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.cc-card-head {
  padding: 0.85rem 0.9rem 0.8rem;
  color: #fff;
}

.cc-body--v2 {
  flex: 1 1 0;
  min-width: 0;
  padding: 0.65rem 0.9rem 0;
  background: #fff;
}

.cc-body--v2:not(:has(.cc-card-footer)) {
  padding-bottom: 0.95rem;
}

.cc-card-head .cc-identity {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 0;
}

.cc-identity {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  margin-bottom: 0.55rem;
}

.cc-card-head .cc-img,
.cc-card-head .cc-img-link .cc-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 0.55rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

.cc-identity .cc-img,
.cc-identity .cc-img-link .cc-img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 0.55rem;
  border: 2px solid #e5e7eb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.cc-identity-text {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 0.05rem;
}

.cc-identity-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  margin-bottom: 0;
}

.cc-card-head .cc-identity-title-row {
  margin-bottom: 0.35rem;
}

.cc-identity-title-row .cc-name,
.cc-identity-title-row .cc-name-link {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.cc-card-head .cc-name,
.cc-card-head .cc-name-link {
  color: #fff;
  display: block;
}

.cc-card-head .cc-name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.cc-card-head .cc-id-rare {
  flex: 0 0 auto;
}

.cc-identity-badges--head {
  margin-top: 0.1rem;
}

.cc-body--v2 .cc-identity-badges--season {
  margin-bottom: 0.45rem;
}

.cc-card-head .cc-id-shozoku {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: none;
}

.cc-card-head .cc-id-season {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  box-shadow: none;
  font-size: 0.6875rem;
  font-weight: 700;
}

.cc-card-head .cc-heishu-chip {
  background: rgba(0, 0, 0, 0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.75rem;
  padding: 0.22rem 0.55rem;
}

.cc-card-head .cc-id-meisho {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.cc-body--v2 .cc-identity-badges {
  margin-bottom: 0.5rem;
}

.cc-body--v2 .cc-name {
  margin: 0;
  font-size: 1.1875rem;
  font-weight: 800;
  line-height: 1.25;
  color: #111827;
}

.cc-id-rare {
  flex-shrink: 0;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.2;
  color: #ca8a04;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.cc-card-head .cc-id-rare {
  color: #fde047;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.cc-identity-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.cc-id-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.22rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.cc-id-shozoku {
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.cc-id-meisho {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.cc-id-season {
  background: #f3f4f6;
  color: #6b7280;
  border: 1px solid #e5e7eb;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.18rem 0.45rem;
}

.character-card--v2 .cc-identity-badges .cc-heishu-chip {
  font-size: 0.75rem;
  padding: 0.22rem 0.55rem;
}

.cc-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0;
  font-size: 0.8125rem;
  color: #4b5563;
  line-height: 1.45;
}

.cc-meta-dot {
  margin: 0 0.3rem;
  opacity: 0.55;
}

.cc-meta-rare {
  color: #ca8a04;
  font-weight: 700;
  font-size: 0.875rem;
}

.cc-meta-season,
.cc-meta-meisho {
  font-weight: 600;
}

.character-card--v2 .cc-status-grid {
  margin: 0.5rem 0 0.55rem;
  padding: 0.5rem 0.35rem;
  gap: 0.35rem 0.25rem;
  background: #f3f4f6;
  border-color: #e5e7eb;
  grid-template-columns: repeat(4, minmax(2.75rem, 1fr));
}

.character-card--v2 .cc-status-cell {
  gap: 0.22rem;
}

.character-card--v2 .cc-status-label {
  font-size: 0.6875rem;
  font-weight: 800;
  color: #374151;
  letter-spacing: 0.02em;
}

.character-card--v2 .cc-status-cell .status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.22rem 0.15rem;
  line-height: 1.15;
  border-radius: 0.4rem;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.character-card--v2 .cc-status-cell .status-none {
  background: #9ca3af;
  font-size: 0.75rem;
  font-weight: 700;
}

/* 一覧カード：武知耐体（tier色 + ミニメーター） */
.cc-stat-compact {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.45rem 0 0.55rem;
}

.cc-stat-compact-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-width: 0;
  min-height: 3.1rem;
  padding: 0.35rem 0.25rem 0.45rem;
  border-radius: 0.45rem;
  border: 1px solid transparent;
  overflow: hidden;
}

.cc-stat-compact-label {
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.85;
}

.cc-stat-compact-val {
  font-size: 1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.cc-stat-compact-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
}

.cc-stat-compact-meter::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--fill, 0%);
  background: currentColor;
  opacity: 0.55;
}

/* tier: 高いほど緑・濃い。低いほど橙→灰 */
.cc-stat-tier-s {
  background: #16a34a;
  border-color: #15803d;
  color: #fff;
}

.cc-stat-tier-a {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #047857;
}

.cc-stat-tier-b {
  background: #ccfbf1;
  border-color: #5eead4;
  color: #0f766e;
}

.cc-stat-tier-c {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0369a1;
}

.cc-stat-tier-d {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #b45309;
}

.cc-stat-tier-e {
  background: #ffedd5;
  border-color: #fdba74;
  color: #c2410c;
}

.cc-stat-tier-f {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
}

.cc-stat-tier-g {
  background: #f3f4f6;
  border-color: #d1d5db;
  color: #4b5563;
}

.cc-stat-tier-none {
  background: #f9fafb;
  border-color: #e5e7eb;
  color: #9ca3af;
}

.cc-stat-tier-s .cc-stat-compact-meter {
  background: rgba(255, 255, 255, 0.25);
}

.cc-stat-tier-s .cc-stat-compact-meter::after {
  background: #fff;
  opacity: 0.85;
}

.character-card--v2 .cc-stats--detail {
  margin: 0.45rem 0 0.55rem;
}

.character-card--v2 .cc-skills {
  gap: 0.4rem;
}

.character-card--v2 .cc-skill {
  font-size: 0.75rem;
  padding: 0.3rem 0.55rem;
  line-height: 1.35;
}

.character-card--v2 .cc-skills-more {
  font-size: 0.72rem;
}

/* ===== カードフッター（スキル + 合体技） ===== */
.cc-card-footer {
  margin-top: 0.45rem;
  margin-left: -0.9rem;
  margin-right: -0.9rem;
  margin-bottom: 0;
  padding: 0.45rem 0.9rem 0.65rem;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  border-radius: 0 0 0.75rem 0.75rem;
}

.cc-footer-block + .cc-footer-block {
  margin-top: 0.35rem;
}

.cc-skill-slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cc-skill-slot-item + .cc-skill-slot-item {
  margin-top: 0.12rem;
}

.cc-skill-slot-details {
  background: transparent;
}

.cc-skill-slot-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.12rem 0.25rem;
  padding: 0;
  cursor: pointer;
  list-style: none;
  line-height: 1.2;
}

.cc-skill-slot-details > .cc-skill-slot-summary::after {
  content: '▸';
  flex-shrink: 0;
  margin-left: auto;
  font-size: 0.65rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.cc-skill-slot-details[open] > .cc-skill-slot-summary::after {
  transform: rotate(90deg);
}

.cc-skill-slot-details > .cc-skill-slot-summary:has(.cc-skill-slot-tags)::after {
  margin-left: auto;
}

.cc-ticket .cc-skill-slot-tags {
  flex: 1 1 auto;
}

.cc-skill-slot-summary::-webkit-details-marker {
  display: none;
}

.cc-skill-slot-item--static .cc-skill-slot-summary {
  cursor: default;
  padding-left: 0;
  padding-right: 0;
}

.cc-skill-slot-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.25rem;
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 800;
  color: #fff;
  background: #374151;
  line-height: 1;
}

.cc-skill-slot-badge--do {
  background: #dc2626;
}

.cc-skill-slot-badge--fu {
  background: #2563eb;
}

.cc-skill-slot-badge--tsui {
  background: #7c3aed;
}

.cc-skill-slot-badge--gi {
  background: #059669;
}

.cc-skill-slot-name {
  font-size: 0.6875rem;
  font-weight: 700;
  color: #1f2937;
  min-width: 0;
  line-height: 1.2;
}

.cc-skill-slot-tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.12rem;
}

.cc-skill-slot-preview {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.625rem;
  line-height: 1.25;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cc-skill-slot-details[open] .cc-skill-slot-preview {
  display: none;
}

.cc-skill-slot-body {
  padding: 0;
}

.cc-skill-slot-desc {
  margin: 0.05rem 0 0;
  font-size: 0.625rem;
  line-height: 1.25;
  color: #6b7280;
}

.cc-skill-slot-item--static .cc-skill-slot-desc {
  margin-top: 0.05rem;
  padding-left: 0;
  font-size: 0.625rem;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.character-card--v2.character-card--linked .cc-skill-slot-item--static .cc-skill-slot-desc {
  -webkit-line-clamp: 1;
}

.cc-skill-slot-more {
  margin: 0;
  font-size: 0.6875rem;
  color: #94a3b8;
}

.cc-card-skill-tag {
  display: inline-block;
  padding: 0.02rem 0.3rem;
  border-radius: 9999px;
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 1.25;
  border: 1px solid #dbeafe;
  background: #eff6ff;
  color: #1e40af;
  white-space: nowrap;
}

.cc-card-skill-tag--status {
  border-color: #bbf7d0;
  background: #ecfdf5;
  color: #166534;
}

.cc-card-skill-tag--trigger {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.cc-card-skill-tag--gi {
  border-color: #ddd6fe;
  background: #f5f3ff;
  color: #5b21b6;
}

.cc-card-skill-tag--dmg {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.cc-gattai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  align-items: center;
}

.cc-gattai-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.22rem 0.45rem;
  border-radius: 0.35rem;
  line-height: 1.25;
}

.cc-gattai-chip-val {
  font-weight: 800;
  color: #b91c1c;
}

.cc-gattai-more {
  font-size: 0.6875rem;
  color: #94a3b8;
  font-weight: 600;
}

.cc-ticket .cc-card-footer {
  margin-top: 0.35rem;
  padding: 0.4rem 0.5rem 0.5rem;
  background: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  border-radius: 0.45rem;
}

.cc-ticket .cc-skill-slot-summary {
  padding-left: 0;
  padding-right: 0;
}

.cc-ticket .cc-footer-block + .cc-footer-block {
  margin-top: 0.3rem;
}

.character-card--v2 .cc-stats--detail + .cc-card-footer,
.character-card--v2 .cc-stat-compact + .cc-card-footer {
  margin-top: 0.45rem;
}

/* ===== コンボ UI 共通（E1/E2/E3/E4） ===== */
.cc-combo-dual {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.45rem 0.5rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.45rem;
}

.cc-combo-dual--compact {
  padding: 0.35rem 0.4rem;
  gap: 0.25rem;
}

.cc-combo-dual .status-badge,
.cc-combo-dual--compact .status-badge {
  flex-shrink: 0;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  font-size: 0.65rem;
  padding: 0.12rem 0.35rem;
  line-height: 1.15;
}

.cc-ticket .cc-combo-dual .status-badge {
  font-size: 0.62rem;
  padding: 0.1rem 0.3rem;
}

.cc-combo-dual-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #475569;
}

.cc-combo-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.cc-combo-row-label {
  flex-shrink: 0;
  width: 2rem;
  font-size: 0.62rem;
  font-weight: 800;
  color: #64748b;
  padding-top: 0.15rem;
}

.cc-combo-row-body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
}

.cc-combo-starters {
  gap: 0.35rem 0.5rem;
}

.cc-combo-starter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.cc-combo-starter-label {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
}

.cc-combo-chaser {
  align-items: center;
}

.cc-combo-arrow {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
}

.cc-combo-empty {
  font-size: 0.68rem;
  color: #94a3b8;
}

.cc-combo-signature {
  display: block;
  font-size: 0.65rem;
  color: #64748b;
  margin-top: 0.15rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* コンボ探索リスト（データシート行） */
.character-list--combo {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cc-combo-explore {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0.6rem;
  padding: 0.65rem 0.75rem;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
}

.cc-combo-explore-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem 0.65rem;
  margin-bottom: 0.5rem;
}

.cc-combo-explore-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #111827;
}

.cc-combo-explore-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.cc-combo-role {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.cc-combo-role--starter {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.cc-combo-role--chaser {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.cc-combo-role--none {
  background: #f3f4f6;
  color: #9ca3af;
  border: 1px solid #e5e7eb;
}

.cc-combo-explore-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.cc-combo-explore-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
}

.cc-combo-explore-label {
  flex-shrink: 0;
  width: 1.25rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #64748b;
  padding-top: 0.2rem;
}

.cc-combo-explore-chips {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
}

.cc-combo-pair-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-wrap: wrap;
}

.cc-combo-pair-key {
  font-size: 0.75rem;
  font-weight: 800;
  color: #475569;
}

.cc-combo-chip-arrow {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
}

.cc-combo-empty-inline {
  font-size: 0.8125rem;
  color: #9ca3af;
  font-weight: 600;
}

.cc-combo-explore .status-badge {
  font-size: 0.75rem;
  padding: 0.15rem 0.45rem;
}

.cc-ticket--v2 .cc-ticket-meta {
  margin-bottom: 0.35rem;
}

.cc-ticket--v2 .cc-combo-dual {
  margin: 0.15rem 0 0.35rem;
}

/* E2: 詳細ページ 2武将接続 */
.character-combo-section {
  margin-top: 1rem;
}

.character-combo-self-rail {
  margin: 0.75rem 0;
}

.character-combo-pick {
  display: block;
  margin: 0.75rem 0;
  font-size: 0.875rem;
  font-weight: 600;
}

.character-combo-select {
  display: block;
  width: 100%;
  max-width: 20rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid #d1d5db;
  border-radius: 0.4rem;
  font-size: 0.875rem;
}

.character-combo-pair-panel {
  margin-top: 0.5rem;
}

.cc-combo-pair-states {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.cc-combo-state-pick {
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 9999px;
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.cc-combo-state-pick.is-active {
  background: #166534;
  border-color: #166534;
  color: #fff;
}

.cc-combo-pair-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem;
  background: #f8fafc;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
}

.cc-combo-pair-side strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.25rem;
}

.cc-combo-pair-sub {
  font-size: 0.72rem;
  color: #64748b;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
}

.cc-combo-pair-link {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
}

.cc-combo-pair-link.is-ok {
  background: #dcfce7;
  color: #166534;
}

.cc-combo-pair-link.is-ng {
  background: #fee2e2;
  color: #b91c1c;
}

.cc-combo-pair-result {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
}

.cc-combo-pair-result.is-ok {
  color: #166534;
}

.cc-combo-pair-result.is-ng {
  color: #b91c1c;
}

/* E3: チェーンプレビュー（編成ツール） */
.combo-free-chain {
  margin: 0.65rem 0;
}

.cc-slot-chain {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem 0.25rem;
  padding: 0.5rem;
  background: #f1f5f9;
  border-radius: 0.45rem;
}

.cc-slot-chain-gap {
  color: #94a3b8;
  font-weight: 700;
  align-self: center;
  padding: 0 0.15rem;
}

.cc-slot-chain-item {
  flex: 1 1 8rem;
  min-width: 0;
}

.cc-slot-chain-name {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: #334155;
}

.cc-chain-preview {
  margin-top: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: #faf5ff;
  border: 1px solid #e9d5ff;
  border-radius: 0.5rem;
}

.cc-chain-preview--empty p {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.cc-chain-preview-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.cc-chain-preview-score {
  font-size: 0.78rem;
  font-weight: 700;
  color: #7c3aed;
}

.cc-chain-pattern {
  padding: 0.45rem 0;
  border-top: 1px solid #ede9fe;
}

.cc-chain-pattern:first-of-type {
  border-top: none;
  padding-top: 0;
}

.cc-chain-pattern-meta {
  font-size: 0.72rem;
  color: #64748b;
  margin-bottom: 0.35rem;
}

.cc-chain-pattern-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  font-size: 0.72rem;
}

.cc-chain-member {
  font-weight: 700;
  color: #334155;
  padding: 0.1rem 0.35rem;
  background: #fff;
  border-radius: 0.25rem;
  border: 1px solid #e2e8f0;
}

.filters-combo {
  min-width: 9rem;
}

.char-list-view-combo .filters-combo {
  display: inline-flex;
}

@media (max-width: 767px) {
  .char-list-view-combo .filters-combo {
    display: flex;
    width: 100%;
  }
}

/* ===== ブックマーク編成：詳細コンパクトカード ===== */
.cc-formation-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  border: 2px solid #64748b;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 5px rgba(15, 23, 42, 0.12);
}

.cc-formation-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.55rem 0.55rem;
  color: #fff;
  text-align: center;
}

.cc-formation-img {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}

.cc-formation-head-text {
  width: 100%;
  min-width: 0;
}

.cc-formation-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.cc-formation-name {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.25;
  color: #fff;
  text-decoration: none;
  word-break: break-word;
}

a.cc-formation-name:hover {
  text-decoration: underline;
}

.cc-formation-head .cc-id-rare {
  flex-shrink: 0;
  font-size: 0.72rem;
}

.cc-formation-head .cc-identity-badges--head {
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem;
  margin-top: 0;
}

.cc-formation-head .cc-id-badge,
.cc-formation-head .cc-heishu-chip {
  font-size: 0.68rem;
  padding: 0.12rem 0.38rem;
}

.cc-formation-head .cc-id-season,
.cc-formation-support-identity .cc-id-season {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  box-shadow: none;
}

.cc-formation-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.55rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cc-formation-detail .cc-status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.15rem;
  margin: 0;
  padding: 0.35rem 0.25rem;
}

.cc-formation-detail .cc-status-cell {
  padding: 0.1rem 0;
}

.cc-formation-detail .cc-status-label {
  font-size: 0.58rem;
}

.cc-formation-detail .cc-status-cell .status-badge,
.cc-formation-detail .cc-status-cell .status-none {
  font-size: 0.62rem;
  padding: 0.06rem 0.12rem;
  white-space: nowrap;
}

.cc-formation-detail .cc-stat-compact {
  gap: 0.25rem;
}

.cc-formation-detail .cc-stat-compact-cell {
  padding: 0.22rem 0.15rem 0.28rem;
}

.cc-formation-detail .cc-stat-compact-label {
  font-size: 0.58rem;
}

.cc-formation-detail .cc-stat-compact-val {
  font-size: 0.72rem;
}

.cc-formation-detail .cc-card-footer {
  margin: 0.15rem -0.55rem -0.55rem;
  padding: 0.45rem 0.55rem 0.55rem;
  border-radius: 0;
  flex: 1 1 auto;
}

.cc-formation-detail .cc-skill-slot-summary {
  gap: 0.15rem 0.25rem;
}

.cc-formation-detail .cc-skill-slot-preview {
  display: none;
}

.cc-formation-detail .cc-skill-slot-badge {
  min-width: 1.05rem;
  height: 1.05rem;
  font-size: 0.62rem;
}

.cc-formation-detail .cc-skill-slot-name {
  font-size: 0.68rem;
}

.cc-formation-detail .cc-skill-slot-desc {
  font-size: 0.68rem;
  line-height: 1.4;
  margin: 0.15rem 0 0;
  color: #475569;
}

.cc-formation-detail .cc-skill-slot-item + .cc-skill-slot-item {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid #e2e8f0;
}

.cc-formation-detail .cc-gattai-chip {
  font-size: 0.66rem;
  padding: 0.18rem 0.35rem;
  line-height: 1.35;
}

.cc-formation-detail .cc-gattai-chip-val {
  display: block;
  font-size: 0.62rem;
  opacity: 0.9;
  margin-top: 0.08rem;
}

.cc-formation-detail .cc-gattai-chips {
  gap: 0.25rem;
}

/* ===== ブックマーク編成 — 支援武将 ===== */
.cc-formation-support {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  border: 2px solid #7c3aed;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #faf5ff;
  box-shadow: 0 1px 5px rgba(91, 33, 182, 0.14);
}

@media (min-width: 640px) {
  .cc-formation-support {
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    align-items: stretch;
  }
}

.cc-formation-support-identity {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  color: #fff;
}

.cc-formation-support-img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 0.45rem;
  border: 2px solid rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

.cc-formation-support-meta {
  min-width: 0;
}

.cc-formation-support-title-row {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}

.cc-formation-support-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  line-height: 1.25;
  word-break: break-word;
}

a.cc-formation-support-name:hover {
  text-decoration: underline;
}

.cc-formation-support-identity .cc-id-rare {
  flex-shrink: 0;
  font-size: 0.72rem;
}

.cc-formation-support-identity .cc-identity-badges--head {
  flex-wrap: wrap;
  gap: 0.2rem;
}

.cc-formation-support-identity .cc-id-badge,
.cc-formation-support-identity .cc-heishu-chip {
  font-size: 0.68rem;
  padding: 0.12rem 0.38rem;
}

.cc-support-gi {
  padding: 0.65rem 0.75rem;
  background: #fff;
  border-top: 1px solid #e9d5ff;
}

@media (min-width: 640px) {
  .cc-support-gi {
    border-top: none;
    border-left: 1px solid #e9d5ff;
  }
}

.cc-support-gi-head .cc-skill-slot-summary {
  cursor: default;
  flex-wrap: wrap;
  gap: 0.2rem 0.35rem;
}

.cc-support-gi-effect {
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: #334155;
}

.cc-support-gi-effect-label {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.08rem 0.35rem;
  border-radius: 0.25rem;
  background: #ede9fe;
  color: #6d28d9;
  font-size: 0.68rem;
  font-weight: 800;
  vertical-align: baseline;
}

.cc-support-gi-no-support,
.cc-support-gi--empty .meta-text {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
}

/* ===== 編成可能な合体技 — 候補ミニ一覧・OR表示 ===== */
.char-formation-gattai-candidates-section {
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e2e8f0;
}

.char-formation-gattai-candidates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.45rem;
}

.char-formation-gattai-candidate {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.18rem 0.38rem 0.18rem 0.22rem;
  border: 1px solid #e2e8f0;
  border-radius: 9999px;
  background: #fff;
  min-width: 0;
}

.char-formation-gattai-candidate-img {
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}

.char-formation-gattai-candidate-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.char-formation-gattai-candidates-empty {
  margin: 0;
  font-size: 0.72rem;
}

.char-formation-required-anchor--display {
  align-items: flex-start;
}

.char-formation-required-anchor-or-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.35rem;
}

.char-formation-required-anchor-or {
  font-size: 0.62rem;
  font-weight: 700;
  color: #64748b;
  white-space: nowrap;
}

.char-formation-gattai-variant-previews {
  display: grid;
  gap: 0.55rem;
}

.char-formation-gattai-variant-preview {
  padding: 0.45rem 0.5rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  background: #f8fafc;
}

.char-formation-gattai-variant-label {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}

/* ===== 編成カード — 技スキル詳細（開閉式） ===== */
.cc-formation-gi-panel {
  margin: 0.65rem 0 0;
  border: 1px solid #e2e8f0;
  border-radius: 0;
  background: #f8fafc;
  overflow: hidden;
}

.combo-ranking-item .cc-formation-gi-panel {
  margin: 0.75rem -1rem -0.75rem;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

.formations-card .cc-formation-gi-panel {
  margin: 0.75rem -1.25rem -1rem;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0 0 0.5rem 0.5rem;
}

.olb-formation-ranking .cc-formation-gi-panel {
  margin: 0.75rem -0.85rem -0.65rem;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.cc-formation-gi-panel-summary {
  cursor: pointer;
  padding: 0.55rem 0.85rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: #475569;
  list-style: none;
  user-select: none;
}

.combo-ranking-item .cc-formation-gi-panel-summary,
.combo-ranking-item .cc-formation-gi-panel-body {
  padding-left: 1rem;
  padding-right: 1rem;
}

.formations-card .cc-formation-gi-panel-summary,
.formations-card .cc-formation-gi-panel-body {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.olb-formation-ranking .cc-formation-gi-panel-summary,
.olb-formation-ranking .cc-formation-gi-panel-body {
  padding-left: 0.85rem;
  padding-right: 0.85rem;
}

.cc-formation-gi-panel-summary::-webkit-details-marker {
  display: none;
}

.cc-formation-gi-panel-summary::before {
  content: '▶';
  display: inline-block;
  margin-right: 0.35rem;
  font-size: 0.62rem;
  color: #94a3b8;
  transition: transform 0.15s ease;
}

.cc-formation-gi-panel[open] > .cc-formation-gi-panel-summary::before {
  transform: rotate(90deg);
}

.cc-formation-gi-panel[open] > .cc-formation-gi-panel-summary {
  border-bottom: 1px solid #e2e8f0;
  background: #f1f5f9;
}

.cc-formation-gi-panel-body {
  padding: 0.45rem 0.85rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cc-formation-gi-section-label {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 800;
  color: #7c3aed;
  letter-spacing: 0.04em;
}

.cc-formation-gi-row {
  padding: 0.45rem 0.55rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.35rem;
  background: #fff;
}

.cc-formation-gi-row--support {
  border-color: #ddd6fe;
  background: #faf5ff;
}

.cc-formation-gi-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.45rem;
}

.cc-formation-gi-char {
  font-size: 0.78rem;
  font-weight: 800;
  color: #1e293b;
}

.cc-formation-gi-skill {
  font-size: 0.72rem;
  font-weight: 700;
  color: #6366f1;
}

.cc-formation-gi-effect {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: #475569;
}

.cc-formation-gi-effect-label {
  display: inline-block;
  margin-right: 0.35rem;
  padding: 0.06rem 0.32rem;
  border-radius: 0.2rem;
  background: #e0e7ff;
  color: #4338ca;
  font-size: 0.62rem;
  font-weight: 800;
  vertical-align: baseline;
}

.cc-formation-gi-row--support .cc-formation-gi-effect-label {
  background: #ede9fe;
  color: #6d28d9;
}

.cc-formation-gi-effect-empty {
  margin: 0.35rem 0 0;
  font-size: 0.72rem;
}

/* ===== 武将個別 — 通常/覚醒切替 ===== */
.char-variant-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 0.75rem;
  margin: 0.75rem 0 1rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  background: #f8fafc;
}

.char-variant-bar-label {
  flex-shrink: 0;
  padding-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #64748b;
}

.char-variant-bar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
}

.char-variant-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.35rem 0.5rem 0.42rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #fff;
  text-decoration: none;
  min-width: 4.25rem;
  max-width: 6.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.char-variant-link:hover {
  border-color: #93c5fd;
  text-decoration: none;
}

.char-variant-link.is-active {
  border-color: #2563eb;
  background: #eff6ff;
  box-shadow: 0 0 0 1px #2563eb;
  pointer-events: none;
}

.char-variant-link-img {
  width: 3rem;
  height: 3rem;
  border-radius: 0.35rem;
  object-fit: cover;
  flex-shrink: 0;
}

.char-variant-link-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: #334155;
  text-align: center;
  line-height: 1.25;
  word-break: break-all;
}

.char-variant-link.is-active .char-variant-link-name {
  color: #0f172a;
}

/* SSRフォールバック（JS読み込み前/無効時の焼き込み表示） */
.char-baked {
  padding: 1rem 1.2rem;
}

.char-baked-name {
  margin: 0 0 0.15rem;
  font-size: 1.3rem;
}

.char-baked-kana {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  color: #64748b;
}

.char-baked-tags {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
}

.char-baked h2 {
  margin: 0.8rem 0 0.3rem;
  font-size: 0.92rem;
}

.char-baked ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.85rem;
  line-height: 1.6;
}

/* シオのメモあり目印（ポートレート右下） */
.cc-imgwrap {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  line-height: 0;
}

.cc-imgwrap--tile {
  display: block;
  width: 100%;
}

.cc-shio-badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eff6ff;
  border: 2px solid #60a5fa;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cc-shio-badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.cc-imgwrap--tile .cc-shio-badge {
  right: 2px;
  bottom: 2px;
  width: 20px;
  height: 20px;
  border-width: 1.5px;
}

.cc-ticket-body .cc-shio-badge {
  width: 20px;
  height: 20px;
  right: -4px;
  bottom: -4px;
  border-width: 1.5px;
}