/* マイバッグ：管理ページ・公開カード共通スタイル
   サイト共通トークン（gs-shell.css / main.css）に揃える。
   --bg 生成りベージュ / --g グリーンアクセント / --line やわらかい境界線。 */

.bag-page {
  max-width: 980px;
  --bag-radius: 18px;
  --bag-radius-sm: 13px;
  --bag-shadow: 0 1px 2px rgba(31, 42, 36, .04),
                0 14px 32px -22px rgba(31, 42, 36, .34);
  --bag-shadow-hover: 0 2px 6px rgba(31, 42, 36, .06),
                      0 20px 38px -20px rgba(31, 42, 36, .40);
  color: var(--ink, #1f2a24);
}

/* ── 共通：ボタンをサイトのグリーン基調に再配色 ──────────── */
.bag-page .btn-primary,
#bagClubModal .btn-primary {
  background: var(--g, #2f8f5b);
  border-color: var(--g, #2f8f5b);
  font-weight: 700;
}
.bag-page .btn-primary:hover,
.bag-page .btn-primary:focus,
#bagClubModal .btn-primary:hover,
#bagClubModal .btn-primary:focus {
  background: var(--g-dark, #26794a);
  border-color: var(--g-dark, #26794a);
}
.bag-page .btn-dark,
.bag-page .btn-dark:hover {
  background: var(--g, #2f8f5b);
  border-color: var(--g, #2f8f5b);
  font-weight: 700;
}
.bag-page .btn-dark:hover { background: var(--g-dark, #26794a); }
.bag-page .btn-outline-primary,
#bagClubModal .btn-outline-primary {
  color: var(--g-dark, #26794a);
  border-color: #bcdcc8;
}
.bag-page .btn-outline-primary:hover,
#bagClubModal .btn-outline-primary:hover {
  background: var(--g, #2f8f5b);
  border-color: var(--g, #2f8f5b);
}
.bag-page .btn-outline-dark,
#bagClubModal .btn-outline-dark {
  color: var(--ink, #1f2a24);
  border-color: var(--line, #dde7df);
}
.bag-page .btn-outline-dark:hover,
#bagClubModal .btn-outline-dark:hover {
  background: var(--soft, #f2faf5);
  color: var(--g-dark, #26794a);
  border-color: #bcdcc8;
}
.bag-page .btn-outline-secondary,
#bagClubModal .btn-outline-secondary {
  color: var(--mute, #69756c);
  border-color: var(--line, #dde7df);
}
.bag-page .btn-outline-secondary:hover,
#bagClubModal .btn-outline-secondary:hover {
  background: var(--soft, #f2faf5);
  color: var(--ink, #1f2a24);
  border-color: #cdddcf;
}
.bag-page .btn { border-radius: 999px; }

/* ── ページ見出し ───────────────────────────────────────── */
.bag-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.bag-head h1 {
  font-weight: 800;
  letter-spacing: .01em;
  color: var(--ink, #1f2a24);
}
.bag-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--g, #2f8f5b);
  background: var(--gs-accent-soft, rgba(47, 143, 91, .1));
  border-radius: 999px;
  padding: .2rem .7rem;
  margin-bottom: .5rem;
}

/* ── 設定・共有カード ───────────────────────────────────── */
.bag-card {
  background: var(--card, #fff);
  border: 1px solid var(--line, #dde7df);
  border-radius: var(--bag-radius);
  padding: 1.15rem 1.3rem;
  margin-bottom: 1rem;
  box-shadow: var(--bag-shadow);
}

.bag-settings > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink, #1f2a24);
  list-style: none;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.bag-settings > summary::-webkit-details-marker { display: none; }
.bag-settings > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--g, #2f8f5b);
  border-bottom: 2px solid var(--g, #2f8f5b);
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.bag-settings[open] > summary::before { transform: rotate(45deg); }
.bag-settings-form { margin-top: 1.1rem; }
.bag-settings-form .form-label { color: var(--mute, #69756c); font-weight: 600; }
.bag-page .form-control,
.bag-page .form-select,
#bagClubModal .form-control,
#bagClubModal .form-select {
  border-color: var(--line, #dde7df);
  border-radius: 10px;
}
.bag-page .form-control::placeholder,
#bagClubModal .form-control::placeholder {
  color: #b7c1ba;
  opacity: 1;
}

/* モーダル表示中は下部ナビが「保存」ボタンを覆ってしまうので隠す
   （bottom-nav z-index:9999 > modal z-index:1055）。 */
body.modal-open .fixed-bottom-bar { display: none; }
.bag-page .form-control:focus,
.bag-page .form-select:focus,
#bagClubModal .form-control:focus,
#bagClubModal .form-select:focus {
  border-color: #9fceb1;
  box-shadow: 0 0 0 .2rem var(--gs-accent-soft, rgba(47, 143, 91, .1));
}
.bag-page .form-check-input:checked {
  background-color: var(--g, #2f8f5b);
  border-color: var(--g, #2f8f5b);
}

/* 共有 URL */
.bag-share-status {
  font-size: .86rem;
  color: var(--mute, #69756c);
  margin-bottom: .6rem;
}
.bag-share-url { display: flex; gap: .5rem; }
.bag-share-url input {
  font-size: .85rem;
  background: var(--soft, #f2faf5);
}
.bag-share.is-private { background: #fbfbf8; }

.bag-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  padding: .14rem .6rem;
  border-radius: 999px;
  margin-right: .4rem;
}
.bag-badge-public { background: var(--g, #2f8f5b); color: #fff; }
.bag-badge-private { background: #eceae2; color: var(--mute, #69756c); }

/* ── セクション ─────────────────────────────────────────── */
.bag-section { margin-top: 2rem; }
.bag-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .35rem;
}
.bag-section-head h2 {
  font-weight: 800;
  color: var(--ink, #1f2a24);
  border-bottom: none;
}
.bag-count {
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  color: var(--g-dark, #26794a);
  background: var(--gs-accent-soft, rgba(47, 143, 91, .1));
  border-radius: 999px;
  padding: .1rem .65rem;
  margin-left: .4rem;
  vertical-align: middle;
}
.bag-count.is-full { background: var(--g, #2f8f5b); color: #fff; }

.bag-group-label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .76rem;
  font-weight: 700;
  color: var(--g-dark, #26794a);
  letter-spacing: .06em;
  margin: 1.15rem 0 .5rem;
}
.bag-group-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g, #2f8f5b);
}
.bag-group-label-reserve { color: var(--y-deep, #e0a521); }
.bag-group-label-reserve::before { background: var(--y-deep, #e0a521); }

.bag-empty {
  color: var(--gs-soft-mute, #8a948c);
  font-size: .9rem;
  background: var(--card, #fff);
  border: 1px dashed var(--line, #dde7df);
  border-radius: var(--bag-radius-sm);
  padding: 1.1rem 1.2rem;
}

/* ── クラブタイル ───────────────────────────────────────── */
.bag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(208px, 1fr));
  gap: .8rem;
}
.bag-tile {
  display: flex;
  flex-direction: column;
  background: var(--card, #fff);
  border: 1px solid var(--line, #dde7df);
  border-radius: var(--bag-radius-sm);
  overflow: hidden;
  box-shadow: var(--bag-shadow);
  transition: transform .16s ease, box-shadow .16s ease;
}
.bag-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--bag-shadow-hover);
}
.bag-tile-static:hover { transform: none; box-shadow: var(--bag-shadow); }

.bag-tile-thumb {
  position: relative;
  background: var(--soft, #f2faf5);
  text-align: center;
  padding: .7rem;
}
.bag-tile-thumb img {
  height: 104px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.bag-tile-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--g, #2f8f5b);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: .1rem .55rem;
  box-shadow: 0 2px 6px -1px rgba(31, 42, 36, .3);
}
.bag-tile-body {
  padding: .65rem .75rem .4rem;
  flex: 1 1 auto;
}
.bag-tile-type {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--g, #2f8f5b);
  text-transform: uppercase;
}
.bag-tile-name {
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.32;
  color: var(--ink, #1f2a24);
  margin-top: .1rem;
}
.bag-tile-name a { color: inherit; text-decoration: none; }
.bag-tile-name a:hover { color: var(--g, #2f8f5b); }
.bag-tile-brand {
  font-size: .78rem;
  color: var(--mute, #69756c);
  margin-top: .05rem;
}
.bag-tile-shaft {
  font-size: .76rem;
  color: var(--mute, #69756c);
  margin-top: .35rem;
  padding-top: .35rem;
  border-top: 1px dashed var(--line, #dde7df);
}
.bag-tile-meta { font-size: .73rem; color: var(--gs-soft-mute, #8a948c); margin-top: .15rem; }
.bag-tile-note {
  font-size: .77rem;
  color: var(--g-dark, #26794a);
  background: var(--gs-accent-soft, rgba(47, 143, 91, .1));
  border-radius: 9px;
  padding: .3rem .5rem;
  margin-top: .4rem;
}
.bag-tile-actions {
  display: flex;
  gap: .3rem;
  padding: .5rem .6rem .6rem;
}
.bag-tile-actions .btn {
  flex: 1 1 0;
  font-size: .73rem;
  padding: .26rem .1rem;
  border-radius: 8px;
}

/* ── モバイル: クラブ種別ごとに横スクロール ─────────────────
   スマホで主力 14 本を縦に並べるとページが長くなりすぎるので、
   クラブ種別 (ドライバー / FW / アイアン …) ごとに 1 行の横スクロール
   ストリップにし、各 tile は画像左 + 情報右の横長カードにする。 */
@media (max-width: 767.98px) {
  .bag-grid {
    display: flex;
    flex-direction: row;
    grid-template-columns: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: .6rem;
    padding-bottom: .3rem;
  }
  /* 横スクロール領域が container を突き抜けて body 全体が左右ぶれするのを防ぐ */
  .bag-page,
  .bag-section {
    overflow-x: hidden;
  }
  .bag-grid::-webkit-scrollbar { height: 4px; }
  .bag-grid::-webkit-scrollbar-thumb {
    background: var(--line, #dde7df);
    border-radius: 4px;
  }
  .bag-tile {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: 1fr auto;
    flex-shrink: 0;
    width: min(86vw, 320px);
    scroll-snap-align: start;
  }
  .bag-tile-thumb {
    grid-row: 1 / span 2;
    width: 100px;
    min-width: 100px;
    padding: .5rem;
    border-right: 1px solid var(--line, #dde7df);
  }
  .bag-tile-thumb img { height: 72px; }
  .bag-tile-badge {
    top: 4px;
    left: 4px;
    font-size: .65rem;
    padding: .05rem .4rem;
  }
  .bag-tile-body {
    grid-column: 2;
    grid-row: 1;
    padding: .5rem .55rem .15rem;
    min-width: 0;
  }
  .bag-tile-name {
    font-size: .82rem;
    line-height: 1.25;
    word-break: break-word;
  }
  .bag-tile-shaft {
    font-size: .7rem;
    margin-top: .25rem;
    padding-top: .25rem;
  }
  .bag-tile-actions {
    grid-column: 2;
    grid-row: 2;
    padding: 0 .55rem .55rem;
    gap: .25rem;
  }
  .bag-tile-actions .btn {
    font-size: .68rem;
    padding: .2rem .15rem;
  }
}

/* ── モーダル（追加・編集）─────────────────────────────── */
#bagClubModal .modal-content {
  border: none;
  border-radius: var(--bag-radius);
  overflow: hidden;
}
#bagClubModal .modal-header {
  background: var(--soft, #f2faf5);
  border-bottom: 1px solid var(--line, #dde7df);
}
#bagClubModal .modal-title { font-weight: 800; color: var(--ink, #1f2a24); }
#bagClubModal .form-label { color: var(--mute, #69756c); font-weight: 600; }

/* 選択中のトグルは緑地＋白文字。ID 付きセレクタで btn-outline-dark の
   配色（#bagClubModal スコープ）に勝たせる。 */
#bagClubModal .bag-source-toggle .btn-check:checked + .btn,
#bagClubModal .bag-source-toggle .btn-check:checked + .btn:hover {
  background: var(--g, #2f8f5b);
  border-color: var(--g, #2f8f5b);
  color: #fff;
}

.bag-search-results {
  max-height: 232px;
  overflow-y: auto;
  margin-top: .45rem;
}
.bag-search-results:empty { margin-top: 0; }
.bag-result {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  text-align: left;
  background: var(--card, #fff);
  border: 1px solid var(--line, #dde7df);
  border-radius: 11px;
  padding: .4rem .55rem;
  margin-bottom: .32rem;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.bag-result:hover {
  background: var(--soft, #f2faf5);
  border-color: #bcdcc8;
}
.bag-result img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  flex: 0 0 auto;
  mix-blend-mode: multiply;
}
.bag-result-text { min-width: 0; }
.bag-result-name {
  font-weight: 700;
  font-size: .85rem;
  color: var(--ink, #1f2a24);
}
.bag-result-sub { font-size: .74rem; color: var(--mute, #69756c); }
.bag-result-empty {
  font-size: .84rem;
  color: var(--gs-soft-mute, #8a948c);
  padding: .5rem .2rem;
}

.bag-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  background: var(--gs-accent-soft, rgba(47, 143, 91, .1));
  border: 1px solid #bcdcc8;
  border-radius: 11px;
  padding: .4rem .7rem;
  margin-top: .45rem;
  font-size: .86rem;
  font-weight: 700;
  color: var(--g-dark, #26794a);
}
.bag-picked .btn-link {
  color: var(--mute, #69756c);
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0;
}

.bag-number-list,
.bag-flex-list,
.bag-factory-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  align-items: center;
}
.bag-factory-shafts { margin: .3rem 0 .5rem; }
.bag-factory-shafts:empty { display: none; }
.bag-factory-details > summary {
  font-size: .82rem;
  font-weight: 700;
  color: var(--g-dark, #26794a);
  cursor: pointer;
  padding: .35rem 0;
  list-style: none;
}
.bag-factory-details > summary::-webkit-details-marker { display: none; }
.bag-factory-details > summary::before {
  content: "";
  display: inline-block;
  width: .42rem;
  height: .42rem;
  margin-right: .45rem;
  vertical-align: middle;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform .18s ease;
}
.bag-factory-details[open] > summary::before { transform: rotate(45deg); }
.bag-factory-body { padding-top: .25rem; }
.bag-factory-group { margin-top: .35rem; }
.bag-factory-group:first-child { margin-top: 0; }
.bag-factory-brand {
  font-size: .72rem;
  font-weight: 600;
  color: var(--mute, #69756c);
  margin-bottom: .2rem;
}

.bag-flex-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .38rem;
  margin: .35rem 0 .25rem;
}
.bag-flex-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--mute, #69756c);
}
.bag-chip {
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid var(--line, #dde7df);
  background: var(--card, #fff);
  color: var(--ink, #1f2a24);
  border-radius: 999px;
  padding: .26rem .8rem;
  cursor: pointer;
  transition: all .12s ease;
}
.bag-chip:hover { background: var(--soft, #f2faf5); border-color: #bcdcc8; }
.bag-chip.is-selected {
  background: var(--g, #2f8f5b);
  color: #fff;
  border-color: var(--g, #2f8f5b);
}

.bag-editinfo {
  background: var(--soft, #f2faf5);
  border: 1px solid var(--line, #dde7df);
  border-radius: 11px;
  padding: .5rem .7rem;
  font-size: .87rem;
  font-weight: 700;
  color: var(--ink, #1f2a24);
}

/* ── 公開カード：クラブセット全体を1枚のカードに ───────── */
.bag-owner-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .6rem;
  max-width: 560px;
  margin: 0 auto .7rem;
}

.bag-witb {
  max-width: 560px;
  margin: 0 auto;
  background: var(--card, #fff);
  border: 1px solid var(--line, #dde7df);
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(31, 42, 36, .05),
              0 34px 64px -36px rgba(31, 42, 36, .55);
  overflow: hidden;
}

/* ヘッダー（プロフィール）*/
.bag-witb-head {
  position: relative;
  padding: 1.4rem 1.45rem 1.2rem;
  background: linear-gradient(165deg, #e9f6ec 0%, #ffffff 72%);
  border-bottom: 1px solid var(--line, #dde7df);
}
.bag-witb-head::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--g, #2f8f5b), #6cbb8c);
}
.bag-witb-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .64rem; font-weight: 800; letter-spacing: .2em;
  color: var(--g, #2f8f5b); margin-bottom: .45rem;
}
.bag-witb-eyebrow::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px;
  background: var(--g, #2f8f5b);
}
.bag-witb-name {
  font-size: 1.45rem; font-weight: 800; letter-spacing: .01em;
  color: var(--ink, #1f2a24); margin: 0; line-height: 1.2;
}
.bag-witb-name span { font-size: .86rem; font-weight: 600; color: var(--mute, #69756c); }
.bag-witb-id { display: flex; align-items: center; gap: .8rem; }
.bag-witb-idtext { min-width: 0; }
.bag-witb-chips {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .32rem;
}
.bag-witb-chips span {
  font-size: .68rem; font-weight: 600;
  color: var(--g-dark, #26794a);
  background: var(--gs-accent-soft, rgba(47, 143, 91, .1));
  border-radius: 999px; padding: .1rem .55rem;
}
.bag-witb-stats { display: flex; gap: .4rem; margin-top: 1rem; }
.bag-witb-stat {
  flex: 1 1 0; text-align: center;
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--line, #dde7df);
  border-radius: 11px; padding: .42rem .2rem;
}
.bag-witb-stat b {
  display: block; font-size: 1.08rem; font-weight: 800;
  color: var(--g-dark, #26794a); line-height: 1.15;
}
.bag-witb-stat span {
  display: block; font-size: .57rem; font-weight: 600;
  color: var(--gs-soft-mute, #8a948c); margin-top: .12rem;
}

/* ひとこと */
.bag-witb-bio {
  font-size: .8rem; color: var(--mute, #69756c);
  padding: .75rem 1.45rem .15rem;
}
.bag-witb-bio .crs { font-weight: 700; color: var(--ink, #1f2a24); }
.bag-witb-bio p { margin: .2rem 0 0; line-height: 1.65; }

/* クラブ一覧（1行＝1クラブ。同一モデルはまとめて1行）*/
.bag-witb-clubs { padding: .5rem .6rem .15rem; }
.bag-witb-line {
  display: flex; align-items: center; gap: .7rem;
  padding: .44rem .55rem;
  border-radius: 12px;
}
.bag-witb-line + .bag-witb-line {
  border-top: 1px solid var(--gs-border-soft, #ebe8df);
}
.bag-witb-line:hover { background: var(--soft, #f2faf5); }
.bag-witb-thumb {
  flex: 0 0 auto; width: 46px; height: 46px;
  background: var(--soft, #f2faf5); border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
}
.bag-witb-thumb img {
  max-width: 40px; max-height: 40px;
  object-fit: contain; mix-blend-mode: multiply;
}
.bag-witb-cmain { flex: 1 1 auto; min-width: 0; }
.bag-witb-cname {
  font-size: .88rem; font-weight: 700; color: var(--ink, #1f2a24);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bag-witb-cname a { color: inherit; text-decoration: none; }
.bag-witb-cname a:hover { color: var(--g, #2f8f5b); }
.bag-witb-csub {
  font-size: .71rem; color: var(--mute, #69756c);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: .08rem;
}
.bag-witb-ctype { font-weight: 700; color: var(--g, #2f8f5b); }
.bag-witb-tag {
  flex: 0 0 auto;
  font-size: .73rem; font-weight: 800;
  color: var(--g-dark, #26794a);
  background: var(--gs-accent-soft, rgba(47, 143, 91, .1));
  border-radius: 999px;
  padding: .22rem .6rem;
  white-space: nowrap;
}
.bag-witb-empty {
  text-align: center; color: var(--gs-soft-mute, #8a948c);
  font-size: .88rem; padding: 1.6rem 1rem;
}

/* 控え */
.bag-witb-reserve {
  margin: .55rem 1rem 0;
  font-size: .75rem; line-height: 1.6; color: var(--mute, #69756c);
  background: #fbf6e9;
  border: 1px solid #f0e6c8;
  border-radius: 12px;
  padding: .5rem .75rem;
}
.bag-witb-reserve b {
  color: var(--y-deep, #e0a521); font-weight: 800;
  margin-right: .15rem;
}

/* フッター */
.bag-witb-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .7rem; margin-top: .7rem;
  padding: .7rem 1.1rem;
  background: var(--soft, #f2faf5);
  border-top: 1px solid var(--line, #dde7df);
}
.bag-witb-brands { display: flex; flex-wrap: wrap; gap: .3rem; }
.bag-witb-brand {
  font-size: .67rem; font-weight: 600;
  color: var(--g-dark, #26794a);
  background: #fff;
  border: 1px solid var(--line, #dde7df);
  border-radius: 999px; padding: .12rem .5rem;
}
.bag-witb-mark { flex: 0 0 auto; display: flex; align-items: center; }
.bag-witb-mark img { height: 19px; width: auto; opacity: .9; }

.bag-sheet-cta { text-align: center; margin-top: 1.3rem; }

/* ── プロフィールアバター ───────────────────────────────── */
.bag-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 50%;
  font-size: 1.45rem; font-weight: 800; color: #fff;
  overflow: hidden; user-select: none;
}
.bag-avatar-img { background: var(--soft, #f2faf5); }
.bag-avatar-img img { width: 100%; height: 100%; object-fit: cover; }
.bag-avatar-c0 { background: #2f8f5b; }
.bag-avatar-c1 { background: #2f6f9f; }
.bag-avatar-c2 { background: #c2792f; }
.bag-avatar-c3 { background: #8a5cb4; }
.bag-avatar-c4 { background: #c0506a; }
.bag-avatar-c5 { background: #4a8a8a; }

/* アバター選択（設定フォーム）*/
.bag-avatar-picker {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: .35rem 0 .5rem;
}
.bag-avatar-opt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 1.1rem; font-weight: 800; color: #fff;
  cursor: pointer; overflow: hidden;
  border: 3px solid transparent;
  transition: transform .12s ease;
}
.bag-avatar-opt.is-none {
  background: #fff; color: var(--mute, #69756c);
  border: 1px dashed var(--line, #dde7df);
  font-size: .68rem; font-weight: 600;
}
.bag-avatar-opt.is-photo { background: var(--soft, #f2faf5); }
.bag-avatar-opt.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.btn-check:checked + .bag-avatar-opt {
  border: 3px solid var(--g-dark, #26794a);
  transform: scale(1.08);
}
.bag-avatar-file { max-width: 380px; }

/* ── SNS シェアバー（円形アイコンボタン）──────────────────── */
.bag-share-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  max-width: 560px; margin: 1rem auto 0;
}
.bag-share-label {
  font-size: .8rem; font-weight: 700;
  color: var(--mute, #69756c); margin-right: .1rem;
}
.bag-share-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: none; border-radius: 50%;
  cursor: pointer; text-decoration: none; color: #fff;
  box-shadow: 0 2px 7px rgba(31, 42, 36, .16);
  transition: transform .13s ease, box-shadow .13s ease, filter .13s ease;
}
.bag-share-btn img {
  /* アイコン画像は外周に透明マージン＋白フチが入っているため、
     少し拡大して円形クリップし、フチを切り落とす。 */
  width: 112%; height: 112%; display: block;
  clip-path: circle(44.6%);
}
.bag-share-btn:hover {
  color: #fff; transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(31, 42, 36, .26);
  filter: brightness(1.08);
}
.bag-share-btn:active { transform: translateY(0); }
.bag-share-btn.is-x { background: #000; }
.bag-share-btn.is-threads { background: #000; }
.bag-share-btn.is-line { background: #06c755; }
.bag-share-btn.is-fb { background: #1877f2; }
.bag-share-btn.is-native {
  background: linear-gradient(135deg,
    #feda75 0%, #fa7e1e 26%, #d62976 52%, #962fbf 76%, #4f5bd5 100%);
}
.bag-share-btn.is-copy.is-done::after {
  content: "コピーしました";
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  background: var(--ink, #1f2a24); color: #fff;
  font-size: .68rem; font-weight: 700;
  padding: .22rem .55rem; border-radius: 7px; white-space: nowrap;
  pointer-events: none;
}

/* ── バッグ評価額 / 中古相場（フリマ実売相場）────────────────── */
.bag-valuation-label {
  font-size: .8rem; font-weight: 700; color: var(--mute, #69756c);
}
.bag-valuation-total {
  font-size: 1.5rem; font-weight: 800; color: var(--g-dark, #26794a);
  line-height: 1.2; margin: .1rem 0 .7rem;
}
.bag-valuation-sublabel {
  font-size: .72rem; font-weight: 600; color: var(--mute, #69756c);
  margin: 0 0 .25rem;
}
.bag-valuation-list {
  list-style: none; margin: 0 0 .6rem; padding: 0;
  border-top: 1px solid var(--line, #dde7df);
}
.bag-valuation-list li {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .42rem 0;
  border-bottom: 1px solid var(--line, #dde7df);
}
.bag-valuation-name {
  flex: 1 1 auto; min-width: 0;
  font-size: .86rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bag-valuation-type {
  flex: 0 0 auto;
  font-size: .68rem; color: var(--mute, #69756c);
}
.bag-valuation-price {
  flex: 0 0 auto;
  font-size: .92rem; font-weight: 700; color: var(--ink, #1f2a24);
}
.bag-valuation-empty {
  font-size: .85rem; color: var(--mute, #69756c); margin: .3rem 0 .6rem;
}
.bag-valuation-note {
  font-size: .72rem; color: var(--mute, #69756c);
  margin: 0; line-height: 1.5;
}

@media (max-width: 560px) {
  .bag-valuation-total { font-size: 1.3rem; }
  .bag-head { flex-direction: column; align-items: flex-start; }
  .bag-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .bag-tile-thumb img { height: 88px; }
  .bag-witb-name { font-size: 1.25rem; }
  .bag-witb-stat b { font-size: 1rem; }
}

/* ── 公開設定（3段ラジオ） ─────────────────────────────────── */
.bag-visibility {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.bag-visibility-opt {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  padding: .65rem .8rem;
  border: 1px solid var(--line, #dde7df);
  border-radius: 12px;
  background: #fff;
  transition: background .15s ease, border-color .15s ease;
  cursor: pointer;
}
.bag-visibility-opt:hover { background: var(--soft, #f2faf5); }
.bag-visibility-opt input[type=radio] {
  margin-top: .2rem;
  flex: 0 0 auto;
}
.bag-visibility-opt:has(input[type=radio]:checked) {
  border-color: var(--g, #2f8f5b);
  background: var(--soft, #f2faf5);
  box-shadow: 0 0 0 1px var(--g, #2f8f5b) inset;
}
.bag-visibility-text { min-width: 0; }
.bag-visibility-label {
  font-weight: 700;
  color: var(--ink, #1f2a24);
  font-size: .95rem;
}
.bag-visibility-desc {
  display: block;
  margin-top: .15rem;
  font-size: .82rem;
  color: var(--mute, #69756c);
  line-height: 1.45;
}

/* ── みんなのマイバッグ一覧 ─────────────────────────────────── */
.bag-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 1.2rem;
}
.bag-list-card {
  position: relative;
  background: var(--card, #fff);
  border: 1px solid var(--line, #dde7df);
  border-radius: var(--bag-radius, 18px);
  box-shadow: var(--bag-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden;
}
.bag-list-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bag-shadow-hover);
  border-color: #cdddcf;
}
.bag-list-link {
  display: block;
  padding: 14px 14px 12px;
  color: inherit;
  text-decoration: none;
}
.bag-list-top {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bag-list-av {
  width: 42px; height: 42px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  overflow: hidden;
}
.bag-list-av-img { background: #fff; }
.bag-list-av-img img { width: 100%; height: 100%; object-fit: cover; }
.bag-list-av-c0 { background: #2f8f5b; }
.bag-list-av-c1 { background: #2f6f9f; }
.bag-list-av-c2 { background: #c2792f; }
.bag-list-av-c3 { background: #8a5cb4; }
.bag-list-av-c4 { background: #c0506a; }
.bag-list-av-c5 { background: #4a8a8a; }
.bag-list-id { min-width: 0; flex: 1; }
.bag-list-name {
  font-weight: 800;
  color: var(--ink, #1f2a24);
  font-size: .95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bag-list-sub {
  font-size: .76rem;
  color: var(--mute, #69756c);
  font-weight: 600;
  margin-top: 1px;
}
.bag-list-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}
.bag-list-chips span {
  font-size: .7rem;
  font-weight: 600;
  color: var(--mute, #69756c);
  background: var(--soft, #f2faf5);
  border: 1px solid var(--line, #dde7df);
  border-radius: 999px;
  padding: .12rem .55rem;
}
.bag-list-thumbs {
  display: flex;
  gap: 5px;
  margin-top: 10px;
}
.bag-list-thumb {
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid var(--line, #dde7df);
  border-radius: 8px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bag-list-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 3px;
}
.bag-list-mod {
  padding: 0 12px 12px;
  margin: 0;
  border-top: 1px dashed var(--line, #dde7df);
  padding-top: 10px;
}
.bag-list-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0 1rem;
}
.bag-list-pager-info {
  font-size: .85rem;
  color: var(--mute, #69756c);
  font-weight: 600;
}
.bag-list-empty {
  text-align: center;
  padding: 1.6rem 1rem;
}
@media (max-width: 560px) {
  .bag-list-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}