/* ==========================================================================
   BoostUP Mansion Search — フロント
   --------------------------------------------------------------------------
   どのテーマに置いても崩れないよう、必要な値は全てこのファイルで定義する。
   テーマ側が同名のトークンを持っていればそれを優先する（第2引数が既定値）。

   デザインの方針は管理画面の BoostUP UI と揃える。
     白い面 / 薄い境界線 / 影は使わない / 4px 基準の余白 / 統一した角丸
   装飾を持たないぶん、サイトの世界観を邪魔せずどこでも使える。
   ========================================================================== */

.bms {
  /* ---- 色 ---- */
  --bms-ink:        var(--ink, #1f2328);
  --bms-ink-sub:    var(--ink2, #4a5157);
  --bms-muted:      var(--muted, #767e86);
  --bms-line:       var(--l, #e3e6e8);
  --bms-line-soft:  var(--ls, #eef0f2);
  --bms-surface:    var(--surf, #fff);
  --bms-surface-2:  var(--surf2, #f6f7f8);
  --bms-accent:     var(--color-accent, #2b6cb0);
  --bms-accent-ink: #fff;
  --bms-accent-soft: #f1f6fb;
  --bms-accent-soft: color-mix(in srgb, var(--bms-accent) 8%, #fff);
  --bms-cv:         var(--cv, var(--color-cv, #d97706));
  --bms-cv-ink:     #fff;

  /* ---- 余白（4px 基準） ---- */
  --bms-2xs: 4px;
  --bms-xs:  8px;
  --bms-sm:  12px;
  --bms-md:  16px;
  --bms-lg:  24px;
  --bms-xl:  32px;

  /* ---- 形 ---- */
  --bms-radius:    8px;
  --bms-radius-sm: 6px;
  --bms-radius-lg: 12px;
  --bms-control:   48px;

  /* ---- 文字 ---- */
  --bms-font-2xs: 11px;
  --bms-font-xs:  12px;
  --bms-font-sm:  13px;
  --bms-font-md:  14px;
  --bms-font-lg:  16px;
  --bms-num: var(--ff-num, inherit);

  color: var(--bms-ink);
  font-size: var(--bms-font-md);
  line-height: 1.7;
}

.bms *,
.bms *::before,
.bms *::after { box-sizing: border-box; }

/* テーマの装飾が紛れ込まないよう、器の中だけ素の状態に戻す */
.bms ul,
.bms ol { list-style: none; margin: 0; padding: 0; }
.bms p  { margin: 0; }

/* ==========================================================================
   全体レイアウト
   --------------------------------------------------------------------------
   検索フォームを上、結果を下に置く縦積み。
   横に並べると絞り込み項目が細長い列に押し込まれて読みにくく、
   結果の1件あたりの幅も狭くなるため。
   ========================================================================== */
.bms { display: block; }
.bms__form-col { min-width: 0; margin-bottom: var(--bms-lg); }
.bms__results-col { min-width: 0; }
.bms__state { display: none; }

/* ==========================================================================
   検索フォーム
   --------------------------------------------------------------------------
   条件は「押して選ぶ」形にする。チェックボックスの点を並べるより、
   選べる範囲が面で見えるほうが探しやすく、指でも押しやすいため。
   ========================================================================== */
.bms-form {
  background: var(--bms-surface);
  border: 1px solid var(--bms-line);
  border-radius: var(--bms-radius-lg);
  padding: var(--bms-lg) var(--bms-lg) 0;
}
.bms-form__grid { display: block; }

/* --------------------------------------------------------------------------
   条件フィールド（アコーディオン）
   見出しは行いっぱいのボタン。右端の丸い記号で開閉が分かるようにする。
   -------------------------------------------------------------------------- */
.bms-field { padding-bottom: var(--bms-lg); }

.bms-field__label {
  display: flex;
  align-items: center;
  gap: var(--bms-xs);
  width: 100%;
  padding: 0 0 var(--bms-xs);
  margin: 0 0 var(--bms-xs);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--bms-font-sm);
  font-weight: 700;
  color: var(--bms-ink);
  text-align: left;
  cursor: pointer;
  appearance: none;
}
.bms-field__label:focus-visible { outline: 2px solid var(--bms-accent); outline-offset: 2px; }
.bms-field__name { flex: 1 1 auto; min-width: 0; }

/* 畳んでいても条件が入っているか分かるバッジ */
.bms-field__badge {
  flex: none;
  min-width: 22px;
  padding: 0 7px;
  background: var(--bms-accent);
  color: var(--bms-accent-ink);
  border-radius: 999px;
  font-size: var(--bms-font-2xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

/* 開＝− / 閉＝＋ を丸い枠の中に描く（アイコン依存なし） */
.bms-field__caret {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--bms-line);
  border-radius: 999px;
}
.bms-field__caret::before,
.bms-field__caret::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--bms-muted);
  transform: translate(-50%, -50%);
}
.bms-field__caret::before { width: 11px; height: 1.5px; }
.bms-field__caret::after  { width: 1.5px; height: 11px; opacity: 0; }
.bms-field.is-collapsed .bms-field__caret::after { opacity: 1; }
.bms-field__label:hover .bms-field__caret { border-color: var(--bms-ink-sub); }

.bms-field__control { min-width: 0; }
.bms-field.is-collapsed .bms-field__control { display: none; }

.bms-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--bms-sm);
}

/* --------------------------------------------------------------------------
   選択肢（ピル型のボタン）
   ネイティブのチェックボックスは隠し、枠そのものを押せる面にする。
   -------------------------------------------------------------------------- */
.bms-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--bms-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}
.bms-checks__item { list-style: none; margin: 0; }
.bms-checks__item::marker { content: none; }

.bms-check {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bms-control);
  padding: 6px var(--bms-sm);
  background: var(--bms-surface);
  border: 1px solid var(--bms-line);
  border-radius: 999px;
  color: var(--bms-ink-sub);
  font-size: var(--bms-font-sm);
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}
/* 入力欄そのものは隠す。押す面はラベル全体。 */
.bms-check input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
}
.bms-check:hover { border-color: var(--bms-ink-sub); color: var(--bms-ink); }
.bms-check:has(input:checked) {
  border-color: var(--bms-accent);
  background: var(--bms-accent-soft);
  color: var(--bms-accent);
  font-weight: 700;
}
/* :has() を持たない環境向け。文字だけでも選択が分かるようにする。 */
.bms-check input:checked ~ .bms-check__text { color: var(--bms-accent); font-weight: 700; }
.bms-check:focus-within { outline: 2px solid var(--bms-accent); outline-offset: 2px; }
.bms-check__text { min-width: 0; word-break: break-word; }

/* --------------------------------------------------------------------------
   入力・セレクト
   -------------------------------------------------------------------------- */
.bms-select,
.bms-input {
  width: 100%;
  min-height: var(--bms-control);
  padding: 0 var(--bms-md);
  background: var(--bms-surface);
  border: 1px solid var(--bms-line);
  border-radius: 999px;
  color: var(--bms-ink);
  font: inherit;
  font-size: var(--bms-font-sm);
  line-height: calc(var(--bms-control) - 2px);
}
.bms-select {
  padding-right: 38px;
  appearance: none;
  /* ネイティブ矢印が消えるので、下向きのくの字を背景で描く */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--bms-muted) 50%),
    linear-gradient(135deg, var(--bms-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-overflow: ellipsis;
}
.bms-select:hover,
.bms-input:hover { border-color: var(--bms-ink-sub); }
.bms-select:focus-visible,
.bms-input:focus-visible {
  outline: 2px solid var(--bms-accent);
  outline-offset: -1px;
  border-color: var(--bms-accent);
}
.bms-select:disabled { background: var(--bms-surface-2); color: var(--bms-muted); cursor: not-allowed; }

.bms-range {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--bms-xs);
}
.bms-range .bms-select:only-child { grid-column: 1 / -1; }
.bms-range__sep { color: var(--bms-muted); font-size: var(--bms-font-sm); }

/* --------------------------------------------------------------------------
   フォーム下部（件数・ボタン）
   -------------------------------------------------------------------------- */
.bms-form__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bms-sm);
  padding: var(--bms-lg) 0;
  border-top: 1px solid var(--bms-line-soft);
  margin: 0 calc(var(--bms-lg) * -1);
  padding-left: var(--bms-lg);
  padding-right: var(--bms-lg);
}
.bms-count { font-size: var(--bms-font-sm); color: var(--bms-muted); }
.bms-count__num {
  font-family: var(--bms-num);
  font-size: 20px;
  font-weight: 700;
  color: var(--bms-ink);
  margin: 0 3px;
}
.bms-form__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bms-sm);
}

.bms-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bms-xs);
  min-height: 52px;
  padding: 0 var(--bms-xl);
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: var(--bms-font-md);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: filter .12s ease, background-color .12s ease;
}
.bms-btn--search { min-width: 300px; background: var(--bms-cv); color: var(--bms-cv-ink); }
.bms-btn--search:hover { filter: brightness(1.06); }
.bms-btn--reset {
  min-height: 44px;
  padding: 0 var(--bms-lg);
  background: var(--bms-surface);
  border-color: var(--bms-line);
  color: var(--bms-muted);
  font-size: var(--bms-font-sm);
  font-weight: 500;
}
.bms-btn--reset:hover { background: var(--bms-surface-2); color: var(--bms-ink); }
.bms-btn:focus-visible { outline: 2px solid var(--bms-accent); outline-offset: 2px; }

/* ==========================================================================
   結果ヘッダ（件数・並び替え）
   ========================================================================== */
.bms-resultsbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bms-sm);
  padding-bottom: var(--bms-sm);
  margin-bottom: var(--bms-md);
  border-bottom: 1px solid var(--bms-line);
}
.bms-total { font-size: var(--bms-font-sm); color: var(--bms-ink-sub); }
.bms-total__num {
  font-family: var(--bms-num);
  font-size: 20px;
  font-weight: 700;
  color: var(--bms-ink);
  margin: 0 2px;
}
.bms-sort { display: flex; align-items: center; gap: var(--bms-xs); }
.bms-sort__label { font-size: var(--bms-font-xs); color: var(--bms-muted); white-space: nowrap; }
.bms-sort__select { width: auto; min-width: 180px; min-height: 42px; line-height: 40px; }

.bms-results-wrap.is-loading { opacity: .45; pointer-events: none; }
.bms-results { display: flex; flex-direction: column; gap: var(--bms-lg); }

.bms-empty {
  padding: var(--bms-xl) var(--bms-md);
  background: var(--bms-surface-2);
  border-radius: var(--bms-radius);
  color: var(--bms-muted);
  font-size: var(--bms-font-sm);
  text-align: center;
}

/* ==========================================================================
   物件カード
   --------------------------------------------------------------------------
   棟カタログ・賃貸・売買のいずれも、テーマの物件一覧と同じ構造・同じクラス
   （p-building-grid / p-building-card）で出力している。
   検索結果だけ別デザインになるのを避けるため、見た目はテーマに任せる。
   ここで補うのはリストの既定スタイルを消すことだけ。
   ========================================================================== */
.bms .p-building-grid { list-style: none; margin: 0; padding: 0; }
.bms .p-building-grid__item { list-style: none; }

/* ==========================================================================
   建物グループ（賃貸：1棟に複数の住戸）
   ========================================================================== */
.bms-bldg {
  background: var(--bms-surface);
  border: 1px solid var(--bms-line);
  border-radius: var(--bms-radius);
  overflow: hidden;
}
.bms-bldg__bar { display: none; }
.bms-bldg__titleline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bms-xs);
  padding: var(--bms-sm) var(--bms-md);
  border-bottom: 1px solid var(--bms-line-soft);
}
.bms-bldg__badge {
  padding: 1px var(--bms-xs);
  background: var(--bms-surface-2);
  border: 1px solid var(--bms-line);
  border-radius: var(--bms-radius-sm);
  color: var(--bms-muted);
  font-size: var(--bms-font-2xs);
}
.bms-bldg__titlelink {
  font-size: var(--bms-font-lg);
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}
.bms-bldg__titlelink:hover { text-decoration: underline; }

.bms-bldg__head {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--bms-md);
  padding: var(--bms-md);
}
.bms-bldg__thumb { aspect-ratio: 4 / 3; background: var(--bms-surface-2); overflow: hidden; border-radius: var(--bms-radius-sm); }
.bms-bldg__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bms-bldg__meta { min-width: 0; }
.bms-bldg__spec-table { width: 100%; border-collapse: collapse; font-size: var(--bms-font-xs); }
.bms-bldg__spec-table th,
.bms-bldg__spec-table td {
  padding: 5px var(--bms-xs);
  border-bottom: 1px solid var(--bms-line-soft);
  text-align: left;
  vertical-align: top;
}
.bms-bldg__spec-table th {
  width: 88px;
  color: var(--bms-muted);
  font-weight: 500;
  white-space: nowrap;
}
.bms-bldg__stations { display: flex; flex-direction: column; gap: 2px; }
.bms-bldg__count {
  padding: var(--bms-xs) var(--bms-md);
  background: var(--bms-surface-2);
  border-top: 1px solid var(--bms-line-soft);
  font-size: var(--bms-font-xs);
  color: var(--bms-ink-sub);
}

/* 住戸の行。CSS Grid の擬似テーブルで、狭い画面でも折り返せるようにする */
.bms-bldg__rooms { display: flex; flex-direction: column; }
.bms-bldg__room-head,
.bms-bldg__room {
  display: grid;
  grid-template-columns: 84px 72px minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .9fr) 72px minmax(0, 1fr);
  gap: var(--bms-xs);
  align-items: center;
  padding: var(--bms-sm) var(--bms-md);
  border-top: 1px solid var(--bms-line-soft);
}
.bms-bldg__room-head {
  background: var(--bms-surface-2);
  color: var(--bms-muted);
  font-size: var(--bms-font-2xs);
  font-weight: 600;
}
.bms-bldg__room.is-hidden { display: none; }
.bms-bldg__floorplan {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--bms-surface-2);
  border-radius: var(--bms-radius-sm);
  overflow: hidden;
}
.bms-bldg__floorplan-img { width: 100%; height: 100%; object-fit: contain; }
.bms-bldg__floorplan-empty { color: var(--bms-muted); font-size: var(--bms-font-2xs); }
.bms-bldg__floor { font-size: var(--bms-font-xs); color: var(--bms-ink-sub); }
.bms-bldg__rent .num { font-family: var(--bms-num); font-size: 19px; font-weight: 700; }
.bms-bldg__rent .unit { font-size: var(--bms-font-xs); }
.bms-bldg__subcost,
.bms-bldg__cost,
.bms-bldg__room-spec { font-size: var(--bms-font-xs); color: var(--bms-ink-sub); }
.bms-bldg__cost span,
.bms-bldg__feature {
  display: inline-block;
  min-width: 18px;
  margin-right: 4px;
  background: var(--bms-surface-2);
  border-radius: var(--bms-radius-sm);
  color: var(--bms-muted);
  font-size: var(--bms-font-2xs);
  text-align: center;
}
.bms-bldg__room-spec { display: flex; flex-direction: column; }

.bms-bldg__fav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: var(--bms-2xs);
  background: none;
  border: 1px solid var(--bms-line);
  border-radius: var(--bms-radius-sm);
  color: var(--bms-muted);
  font: inherit;
  font-size: var(--bms-font-2xs);
  cursor: pointer;
}
.bms-bldg__fav-btn[aria-pressed="true"] { border-color: var(--bms-cv); color: var(--bms-cv); }
.bms-bldg__fav-icon { font-size: 16px; line-height: 1; }

.bms-bldg__detail { display: flex; flex-direction: column; gap: var(--bms-2xs); }
.bms-bldg__detail-link,
.bms-bldg__contact-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 var(--bms-xs);
  border: 1px solid var(--bms-line);
  border-radius: var(--bms-radius-sm);
  color: var(--bms-ink-sub);
  font-size: var(--bms-font-2xs);
  text-decoration: none;
  white-space: nowrap;
}
.bms-bldg__detail-link:hover,
.bms-bldg__contact-link:hover { background: var(--bms-surface-2); }
.bms-bldg__contact-link { background: var(--bms-cv); border-color: var(--bms-cv); color: var(--bms-cv-ink); }
.bms-bldg__contact-link:hover { background: var(--bms-cv); filter: brightness(1.06); }

.bms-bldg__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 38px;
  background: var(--bms-surface-2);
  border: 0;
  border-top: 1px solid var(--bms-line-soft);
  color: var(--bms-ink-sub);
  font: inherit;
  font-size: var(--bms-font-xs);
  cursor: pointer;
}
.bms-bldg__toggle:hover { background: var(--bms-line-soft); }

/* ==========================================================================
   現在の検索条件 / 保存した条件
   ========================================================================== */
.bms-condition {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--bms-sm);
  padding: var(--bms-md);
  margin-bottom: var(--bms-md);
  background: var(--bms-surface);
  border: 1px solid var(--bms-line);
  border-radius: var(--bms-radius);
}
.bms-condition__body { flex: 1 1 320px; min-width: 0; }
.bms-condition__eyebrow {
  margin-bottom: var(--bms-2xs);
  color: var(--bms-muted);
  font-size: var(--bms-font-2xs);
  letter-spacing: .06em;
}
.bms-condition__summary { display: flex; flex-wrap: wrap; gap: var(--bms-2xs); }
.bms-condition__token {
  padding: 2px var(--bms-xs);
  background: var(--bms-surface-2);
  border: 1px solid var(--bms-line);
  border-radius: var(--bms-radius-sm);
  font-size: var(--bms-font-xs);
}
.bms-condition__count { margin-top: var(--bms-xs); font-size: var(--bms-font-sm); }
.bms-condition__actions { display: flex; flex-wrap: wrap; gap: var(--bms-xs); }
.bms-condition__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 var(--bms-sm);
  background: var(--bms-surface);
  border: 1px solid var(--bms-line);
  border-radius: var(--bms-radius-sm);
  color: var(--bms-ink-sub);
  font: inherit;
  font-size: var(--bms-font-xs);
  text-decoration: none;
  cursor: pointer;
}
.bms-condition__btn:hover { background: var(--bms-surface-2); }

.bms-saved { flex: 1 1 100%; padding-top: var(--bms-sm); border-top: 1px solid var(--bms-line-soft); }
.bms-saved--standalone { border-top: 0; padding-top: 0; margin-bottom: var(--bms-md); }
.bms-saved__head { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-xs); }
.bms-saved__title { font-size: var(--bms-font-xs); font-weight: 700; }
.bms-saved__clear,
.bms-saved__remove {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: 0;
  color: var(--bms-muted);
  font: inherit;
  font-size: var(--bms-font-2xs);
  cursor: pointer;
}
.bms-saved__clear:hover,
.bms-saved__remove:hover { color: var(--bms-ink); text-decoration: underline; }
.bms-saved__list { display: flex; flex-direction: column; gap: var(--bms-2xs); margin-top: var(--bms-xs); }
.bms-saved__item { display: flex; align-items: center; justify-content: space-between; gap: var(--bms-xs); }
.bms-saved__link { color: var(--bms-ink-sub); font-size: var(--bms-font-xs); }

/* ==========================================================================
   ページ送り
   --------------------------------------------------------------------------
   テーマの物件一覧と同じ構造・同じクラスで出しているので、見た目はテーマに任せる。
   ここでは AJAX 用にリンクの既定挙動だけ整える。
   ========================================================================== */
.bms .nav-links a[data-paged] { cursor: pointer; }

/* ==========================================================================
   お気に入り一覧
   ========================================================================== */
.bms-favorites__bar,
.bms-favorites__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bms-sm);
  padding: var(--bms-sm) 0;
}
.bms-favorites__actions { justify-content: center; }
.bms-favorites__count { font-size: var(--bms-font-sm); }
.bms-favorites__check { display: flex; align-items: center; gap: var(--bms-2xs); font-size: var(--bms-font-xs); cursor: pointer; }
.bms-favorites__empty,
.bms-favorites__loading {
  padding: var(--bms-xl) var(--bms-md);
  color: var(--bms-muted);
  font-size: var(--bms-font-sm);
  text-align: center;
}
.bms-btn--remove { background: var(--bms-surface); border-color: var(--bms-line); color: var(--bms-ink-sub); }
.bms-btn--remove:disabled { opacity: .5; cursor: not-allowed; }

/* ==========================================================================
   スマホ
   --------------------------------------------------------------------------
   もともと縦積みなので、列数を減らすだけでよい。
   （全画面ドロワーは横並びレイアウト時の仕組みだったため使わない）
   ========================================================================== */
@media (max-width: 1023px) {
  .bms-form { padding: var(--bms-md) var(--bms-md) 0; }
  .bms-checks { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .bms-bldg__head { grid-template-columns: minmax(0, 1fr); }

  .bms-bldg__room-head { display: none; }
  .bms-bldg__room {
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas:
      "plan price"
      "plan spec"
      "plan cost"
      "floor floor"
      "fav detail";
    row-gap: var(--bms-2xs);
  }
  .bms-bldg__floorplan { grid-area: plan; }
  .bms-bldg__price     { grid-area: price; }
  .bms-bldg__room-spec { grid-area: spec; flex-direction: row; gap: var(--bms-xs); }
  .bms-bldg__cost      { grid-area: cost; }
  .bms-bldg__floor     { grid-area: floor; }
  .bms-bldg__fav       { grid-area: fav; }
  .bms-bldg__detail    { grid-area: detail; flex-direction: row; justify-content: flex-end; }
}

@media (max-width: 599px) {
  .bms-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bms-stack { grid-template-columns: minmax(0, 1fr); }
  .bms-form__buttons { width: 100%; flex-direction: column; }
  .bms-form__buttons .bms-btn { width: 100%; min-width: 0; }
  .bms-range { grid-template-columns: minmax(0, 1fr); }
  .bms-range__sep { display: none; }
  .bms-resultsbar { align-items: flex-start; }
  .bms-sort { width: 100%; }
  .bms-sort__select { flex: 1 1 auto; min-width: 0; }
}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion: reduce) {
  .bms *,
  .bms *::before,
  .bms *::after { transition: none !important; }
}