/* バッグカード共通スタイル。home.html の「みんなのクラブセッティング」と、
 * クラブ/シャフト詳細の「このクラブをセッティングに加えているみんな」
 * (public_bags_using_section.html) で共有する。
 * 以前は home.html 内 <style> に閉じていて、詳細ページから使うと
 * 反映されず巨大化していた。
 */
.gs-bags-scroll {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 3px;
}
.gs-bags-scroll::-webkit-scrollbar { display: none; }

.gs-bag {
  flex: 0 0 auto;
  width: 210px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--soft, #f7f9f6);
  border: 1px solid var(--line, #e6e9e3);
  border-radius: 12px;
  padding: 12px 13px;
  text-decoration: none;
  color: var(--ink, #1f2a23);
  transition: border-color .15s ease, transform .15s ease;
}
.gs-bag:hover {
  border-color: #cdddcf;
  transform: translateY(-2px);
  color: var(--ink, #1f2a23);
}
.gs-bag-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gs-bag-av {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
}
.gs-bag-av-img { background: #fff; }
.gs-bag-av-img img { width: 100%; height: 100%; object-fit: cover; }
.gs-bag-av-c0 { background: #2f8f5b; }
.gs-bag-av-c1 { background: #2f6f9f; }
.gs-bag-av-c2 { background: #c2792f; }
.gs-bag-av-c3 { background: #8a5cb4; }
.gs-bag-av-c4 { background: #c0506a; }
.gs-bag-av-c5 { background: #4a8a8a; }
.gs-bag-id { min-width: 0; flex: 1; }
.gs-bag-name {
  display: block;
  font-size: .84rem;
  font-weight: 800;
  color: var(--ink, #1f2a23);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gs-bag-meta {
  display: block;
  font-size: .69rem;
  color: #8a948c;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.gs-bag-clubs { display: flex; gap: 4px; }
.gs-bag-thumb {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line, #e6e9e3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.gs-bag-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 2px;
}