/* カルドセプトラボ カードDB スタイル（モック table/embed から移植） */
.ccl-wrap, .cardref {
  --gold:#9a7b3f; --line:#d9cfbb; --card:#fffdf8; --ink:#2b2620;
}

/* ===== 属性色（丸・四角・インライン共通） ===== */
.ccl-wrap .e-fire, .cardref .e-fire { background:#c0392b; }
.ccl-wrap .e-water,.cardref .e-water{ background:#2e6da4; }
.ccl-wrap .e-earth,.cardref .e-earth{ background:#5a8f3c; }
.ccl-wrap .e-wind, .cardref .e-wind { background:#b07d2a; }
.ccl-wrap .e-none, .cardref .e-none { background:#7a7268; }

/* ===== 一覧表 ===== */
.ccl-wrap { font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color:#2b2620; }
.ccl-filterbar { background:#fffdf8; border:1px solid #d9cfbb; border-radius:12px; padding:12px 14px;
  margin-bottom:16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.ccl-filterbar .group { display:flex; align-items:center; gap:6px; font-size:13px; }
.ccl-filterbar label { color:#6b6357; font-weight:600; }
.ccl-filterbar select { font-size:13px; padding:5px 8px; border:1px solid #d9cfbb; border-radius:7px; background:#fff; }
.ccl-filterbar .chip { display:inline-flex; align-items:center; padding:5px 10px; border:1px solid #d9cfbb;
  border-radius:20px; background:#fff; cursor:pointer; font-size:12.5px; user-select:none; }
.ccl-filterbar .chip.on { background:#9a7b3f; color:#fff; border-color:#9a7b3f; }
.ccl-filterbar .ccl-count { margin-left:auto; font-size:12px; color:#8a8170; }

.ccl-table { width:100%; border-collapse:collapse; background:#fffdf8; border:1px solid #d9cfbb;
  border-radius:12px; overflow:hidden; }
.ccl-table thead th { background:#efe8d6; color:#5a5142; font-size:14px; text-align:left; padding:10px 9px;
  border-bottom:2px solid #d9cfbb; white-space:nowrap; }
.ccl-table tbody td { padding:12px 9px; font-size:14.5px; border-bottom:1px solid #d9cfbb; vertical-align:top; }
.ccl-table tbody tr:hover { background:#faf6ec; }

.ccl-thumb { width:96px; height:171px; border-radius:8px; object-fit:contain; background:#f0ece2; }
.ccl-thumb-empty { width:96px; height:171px; background:linear-gradient(135deg,#e8e0cd,#cbbfa3); display:flex; align-items:center;
  justify-content:center; color:#8a7c5a; font-size:11px; border-radius:8px; }
.ccl-table .name { font-weight:700; font-size:15px; }
.ccl-table .name a { color:#2b2620; text-decoration:none; }
.ccl-table .name a:hover { text-decoration:underline; }
.ccl-table .rar { display:inline-block; background:#1f1a12; color:#f4ecd6; font-size:11px; padding:1px 6px;
  border-radius:5px; margin-top:4px; }
.ccl-table .num { font-weight:700; color:#9a7b3f; text-align:center; font-size:15px; }

/* バッジ共通 */
.ccl-wrap .none, .cardref .none { color:#b7ad98; }
.badges { display:flex; flex-direction:column; gap:4px; align-items:flex-start; }
.place { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%;
  color:#fff; font-size:12px; font-weight:700; box-shadow:inset 0 0 0 2px rgba(255,255,255,.35); }
.item { display:inline-flex; align-items:center; justify-content:center; min-width:46px; height:28px; padding:0 8px;
  border-radius:6px; background:#6b4f2e; color:#fff; font-size:11.5px; font-weight:700;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.25); }

/* コスト */
.cost { font-weight:700; color:#9a7b3f; font-size:15px; white-space:nowrap; }
.cost .plus { color:#b7ad98; font-weight:400; font-size:12px; margin:0 1px; }

/* インライン属性アイコン（💧🌱の仮表示） */
.iel { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%;
  color:#fff; font-size:10px; font-weight:700; vertical-align:middle; margin:0 1px; }
.cost .iel { font-size:10px; }

/* 能力 */
.ab { font-size:13.5px; color:#4a4338; line-height:1.6; min-width:200px; }
.kw { display:inline-block; background:#9a7b3f; color:#fff; font-size:11.5px; font-weight:700;
  padding:1px 8px; border-radius:10px; margin:0 2px; }

/* 寸評・Tier */
.sun { font-size:13.5px; color:#3a342a; line-height:1.6; min-width:240px; background:#fbf7ec;
  border-left:3px solid #9a7b3f; padding:8px 10px; border-radius:0 6px 6px 0; }
.tier { display:inline-block; font-weight:800; font-size:13px; color:#fff; width:24px; height:24px; line-height:24px;
  text-align:center; border-radius:6px; margin-right:7px; vertical-align:middle;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.3); }
.t-s { background:linear-gradient(135deg,#d4af56,#9a7b3f); }
.t-a { background:#c0392b; } .t-b { background:#2e6da4; } .t-c { background:#7a7268; }

.ccl-hidden { display:none !important; }

/* ===== 1枚引用 ===== */
.cardref { display:flex; gap:16px; background:#fffdf8; border:1px solid #d9cfbb; border-radius:14px;
  padding:16px; margin:22px 0; box-shadow:0 3px 12px rgba(0,0,0,.08); position:relative;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif; color:#2b2620; }
.cardref::before { content:"CARD"; position:absolute; top:-9px; left:16px; background:#9a7b3f; color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.12em; padding:2px 8px; border-radius:5px; }
.cardref .art { width:120px; height:160px; flex:0 0 auto; border-radius:10px; overflow:hidden;
  background:linear-gradient(135deg,#e8e0cd,#cbbfa3); display:flex; align-items:center; justify-content:center;
  color:#8a7c5a; font-size:12px; }
.cardref .art img { width:100%; height:100%; object-fit:cover; }
.cardref .info { flex:1; min-width:0; }
.cardref .top { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.cardref .nm { font-size:18px; font-weight:800; }
.cardref .rar { background:#1f1a12; color:#f4ecd6; font-size:11px; padding:1px 7px; border-radius:5px; }
.cardref .type { font-size:12px; color:#8a8170; border:1px solid #d9cfbb; border-radius:5px; padding:1px 7px; }
.cardref .stats { display:flex; gap:18px; margin-bottom:8px; font-size:14px; flex-wrap:wrap; }
.cardref .stats b { color:#9a7b3f; font-size:16px; }
.cardref .frow { display:flex; font-size:13px; padding:3px 0; border-top:1px solid #eee5d3; }
.cardref .frow .lbl { flex:0 0 96px; color:#8a8170; font-weight:700; }
.cardref .frow .val { flex:1; }
.cardref .more { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:#fff;
  background:#9a7b3f; text-decoration:none; padding:6px 14px; border-radius:8px; }

/* スマホ */
@media (max-width:600px) {
  .ccl-table { display:block; overflow-x:auto; white-space:nowrap; }
  .cardref { flex-direction:column; }
  .cardref .art { width:100%; height:200px; }
}