/* 画像グリッド型（旧UI互換） */
.tag-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px;
}
.tag-item {
  border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 8px; display: grid; place-items: center; gap: 6px; cursor: pointer; background: #fff;
}
.tag-item img { width: 56px; height: 56px; object-fit: contain; }
.tag-item .label { font-size: 12px; color: var(--ink); }
.tag-item.is-selected { outline: 2px solid var(--accent); background: #fff7fb; }

/* ボタン型（<details> 用） */
.tags-disclosure { margin-block: 16px 8px; }
.tag-toggle {
  list-style: none; width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 16px; border-radius: var(--radius-l); border: 1px solid #bc611e; background: #fff;
  font-weight: 600; -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.tag-toggle::-webkit-details-marker { display: none; }
.tags-disclosure[open] .tag-toggle { box-shadow: 0 0 0 2px #ff99bb22 inset; }
.tag-toggle__chevron { transition: transform .2s; }
.tags-disclosure[open] .tag-toggle__chevron { transform: rotate(180deg); }

/* 並び */
.tag-panel { padding: 10px 4px 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 12px; }
.tag-list .tag-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--radius-m); border: 1px solid #eee; background: #fff;
  transition: background .15s, box-shadow .15s, border-color .15s;
}
.tag-list .tag-item[aria-pressed="true"] {
  background: #ffe7f0; border-color: #ffb6ca; box-shadow: 0 0 0 2px #ff99bb22 inset;
}
.tag-list .tag-item img {
  width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: block;
}

/* レガシー .tag（互換） */
.tag { display: inline-block; background: var(--chip); border-radius: 999px; padding: 2px 8px; font-size: 11px; margin-right: 6px; }
/* on/off スワップ（common.js が aria-pressed を付与） */
.tag[aria-pressed="true"] { background: #ffe7f0; box-shadow: 0 0 0 2px #ff99bb22 inset; }