body { background-color:#ffe; touch-action: manipulation; }
#topHeader { transition: all .2s ease; }
.h-scroll { display:flex; gap:.75rem; overflow-x:auto; padding-bottom:.5rem; }
.h-scroll.with-scrollbar { scrollbar-color:#999 transparent; }
#.card-item { min-width:180px; max-width:220px; border:2px solid transparent; }
.card-item { margin:2px; }
.card-item.active { outline:2px solid #ffcc00; box-shadow:0 0 0 4px rgba(255,204,0,.35); }
.card-item .counter { display:flex; gap:.5rem; align-items:center; }
.card-item img { width:100%; height:140px; object-fit:cover; }
#summaryBar { position:fixed; bottom:0; left:0; right:0; height:18vh; background:#fff; border-top:1px solid #ddd; }
@media (max-width:576px){ #summaryBar{ height:20vh; } }
#.card-item:focus { outline:3px solid #333; }

.opacity-50 {
  opacity: 0.5;
}
.pointer-events-none {
  pointer-events: none;
}

/* カードが選択されたときの見た目（山吹色） */
.card-item.selected {
  background-color: #ffeb99;        /* 山吹色 */
  border: 2px solid #e0a800;        /* 少し濃い山吹色の枠 */
  box-shadow: 0 0 0 4px rgba(255,204,0,0.35);
  transition: background-color .15s ease, border .15s ease;
}

.card-item {
  cursor: pointer;
  transition: transform .1s ease;
}

.card-item:hover {
  transform: scale(1.03);
}

.card-item {
  background-color: #fff;
  border: 2px solid transparent;
}

.card-item {
  padding: 6px;
  border-radius: 8px;
}

#addSetBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid #ddd;
  padding: 12px;
  text-align: center;
  z-index: 1000;
}