:root {
  --pf-border: #2b2f34;
  --pf-bg: #111418;
  --pf-text: #eaeef2;
  --pf-muted: #9aa3af;
  --pf-accent: #4EA3FF;
}

/* 既存の黒白テーマに合わせて軽く */
.ss-wrap{ padding: 14px 10px 24px; }

.ss-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.ss-title{ margin:0 0 6px; font-size:22px; font-weight:900; }
.ss-sub{ margin:0 0 12px; color:var(--color-muted); font-size:14px; }

.sch-form{
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255,255,255,0.02);
}

.sch-row{ display:flex; flex-direction:column; gap:8px; margin-bottom: 12px; }
.sch-label{ font-size: 13px; font-weight: 900; color: rgba(255,255,255,0.90); }

.sch-radio-wrap{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px; 
}
.sch-radio{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 18px;
  border-radius: 9999px;
  border: 1px solid var(--pf-border);
  background: #0c0f12;
  color: var(--pf-text);
  cursor: pointer;
  user-select: none;
  transition: transform .05s ease, filter .15s ease, background .15s ease, border-color .15s ease;
  font-size: 14px;
  font-weight: 700;
}

/* radioは隠す */
.sch-radio input{
  display: none;
}

.sch-radio.is-active{
  border-color: var(--pf-accent);
  box-shadow: 0 0 0 3px rgba(78,163,255,.18);
}

.sch-radio:hover{
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.sch-input, .sch-select{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--color-text);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}
.sch-input:focus, .sch-select:focus{
  border-color: rgba(255,255,255,0.28);
}

.sch-actions{ display:flex; gap:10px; margin-top: 6px; }
.sch-btn{
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--color-text);
  cursor: pointer;
}
.sch-btn:hover{ background: rgba(255,255,255,0.12); }
.sch-btn--ghost{
  background: transparent;
}

.sch-meta{
  margin: 10px 0;
  color: var(--color-muted);
  font-size: 13px;
}

/* 結果カード */
.sch-results{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
@media (max-width: 750px){ .sch-results{ grid-template-columns: 1fr; } }

.sch-card{
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.20);
}
.sch-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.sch-name{ margin:0; font-size: 18px; font-weight: 900; line-height: 1.5; }
.sch-desc{ margin: 8px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.6; }
.sch-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 15px; margin-bottom: 5px}

.badge{
  font-size: 14px; font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.86);
  white-space: nowrap;
}
.badge--diff{ background: rgba(255,255,255,0.10); }

/* ===== マルチセレクト（スクショ風） ===== */
/* ===== マルチセレクト ===== */
.ms{
  position: relative;
  width: 100%;
}
.sch-row{ width: 100%; }
.ms-btn{ width: 100%; }
.ms-menu{ width: 100%; }
.ms-btn{
  width: 100%;
  display:flex; align-items:center; justify-content:space-between;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--color-text);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 900;
}
.ms-btn:hover{ background: rgba(255,255,255,0.07); }

.ms-caret{
  width: 8px; height: 8px;
  border-right: 2px solid rgba(255,255,255,0.70);
  border-bottom: 2px solid rgba(255,255,255,0.70);
  transform: rotate(45deg);
  margin-left: 10px;
}

.ms-menu{
  position:absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  display:none;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(12,12,12,0.98);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  padding: 8px;
  z-index: 50;
  max-height: 260px;
  overflow:auto;
}
.ms-menu--tall{ max-height: 320px; }

.ms.is-open .ms-menu{ display:block; }

.ms-item{
  display:flex; align-items:center; gap:10px;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.ms-item:hover{ background: rgba(255,255,255,0.06); }

.ms-item input{ transform: scale(1.05); }










/* ===============================
   select_search.css | Light mode overrides
=============================== */
:root[data-theme="light"] .sch-form{
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}

:root[data-theme="light"] .sch-label{
  color: var(--color-text) !important;
  opacity: .85;
}

/* input/select の黒ベタを潰す */
:root[data-theme="light"] .sch-input,
:root[data-theme="light"] .sch-select{
  background: var(--color-input-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* 学校種別ボタン（2択） */
:root[data-theme="light"] .sch-radio{
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(15,23,42,.14) !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .sch-radio:hover{
  background: #eef2f7 !important;
  filter: none !important;
}

:root[data-theme="light"] .sch-radio.is-active{
  border-color: var(--pf-accent) !important;
  background: rgba(37,99,235,.08) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
}

/* ボタン（薄いグレー基調） */
:root[data-theme="light"] .sch-btn{
  background: var(--color-surface-2) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}
:root[data-theme="light"] .sch-btn:hover{
  background: var(--color-surface) !important;
}
:root[data-theme="light"] .sch-btn--ghost{
  background: transparent !important;
}

/* 結果カード */
:root[data-theme="light"] .sch-card{
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.08) !important;
}

/* バッジ */
:root[data-theme="light"] .badge,
:root[data-theme="light"] .badge--diff{
  background: rgba(2,6,23,.06) !important;
  border-color: rgba(2,6,23,.10) !important;
  color: rgba(2,6,23,.78) !important;
}

/* ===== マルチセレクト ===== */
:root[data-theme="light"] .ms-btn{
  background: var(--color-input-bg) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
:root[data-theme="light"] .ms-btn:hover{
  background: var(--color-surface-2) !important;
}

:root[data-theme="light"] .ms-caret{
  border-right-color: rgba(2,6,23,.70) !important;
  border-bottom-color: rgba(2,6,23,.70) !important;
}

:root[data-theme="light"] .ms-menu{
  background: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.12) !important;
}

:root[data-theme="light"] .ms-item:hover{
  background: rgba(2,6,23,.06) !important;
}







/* ===== マルチセレクト：メニュー右上に「決定」 ===== */
.ms-menu{
  position: absolute;
  /* 既存のままでOK */
}

/* 上部ヘッダー（右寄せ） */
.ms-menu-head{
  position: sticky;          /* スクロールしても上に残る */
  top: 0;
  display: flex;
  justify-content: flex-end;
  padding: 6px 6px 8px;
  background: inherit;       /* ms-menu の背景を継承 */
  z-index: 1;
}

/* 決定ボタン */
.ms-done{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--color-text);
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.ms-done:hover{ background: rgba(255,255,255,0.12); }

/* ライトモード */
:root[data-theme="light"] .ms-done{
  background: rgba(2,6,23,.06);
  border-color: rgba(2,6,23,.10);
  color: var(--color-text);
}
:root[data-theme="light"] .ms-done:hover{
  background: rgba(2,6,23,.10);
}