:root{ color-scheme: light dark; }
*{ box-sizing: border-box; }
body{ margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Apple Color Emoji", "Segoe UI Emoji"; line-height:1.6; padding:12px; }
a{ color:inherit; text-decoration: underline; }

.cb-header{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:.6rem; }
.cb-controls{ display:flex; flex-wrap:wrap; gap:8px; margin:.8rem 0; }
.btn, .cb-controls input[type="text"], .cb-controls button{
  padding:.5rem .7rem; border:1px solid #cfcfcf; border-radius:10px; background:#fff; cursor:pointer;
}
.cb-controls input[type="text"]{ min-width:220px; }
.btn{ display:inline-block; }
.badge{ min-width:1.6em; text-align:center; border-radius:999px; background:#eee; border:1px solid #ddd; padding:.1rem .45rem; }

.cb-preview img{ max-width:320px; max-height:200px; border:1px solid #ddd; border-radius:10px; }

.cb-sub{ margin-top:.8rem; }
.cb-gallery{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:10px; margin-top:.5rem;
}
.cb-card{
  border:1px solid #e5e7eb; border-radius:12px; padding:8px; background:#fff;
  display:flex; flex-direction:column; gap:6px;
}
.cb-card img{ width:100%; height:120px; object-fit:cover; border-radius:8px; }
.cb-meta{ font-size:.85rem; opacity:.85; line-height:1.35; }
.cb-actions{ display:flex; gap:6px; }
.cb-actions button{
  flex:1; padding:.4rem .5rem; border:1px solid #cfcfcf; border-radius:10px; background:#fff; cursor:pointer; font-size:.85rem;
}

/* 小さめ画面 */
@media (max-width: 480px){
  .cb-controls input[type="text"]{ min-width:160px; }
  .cb-preview img{ max-width:100%; }
}