@charset "UTF-8";
/*
Theme Name:MY THEME
Author:conjac-botan
Description:This is my original theme.
Version: 1.0
*/

/* -------------------------------------------------
   Botan Demo – Scoped base
   （#botan 配下に限定。テーマCSSの干渉を最小化）
------------------------------------------------- */
#botan, #botan * { box-sizing: border-box; }
#botan h1, #botan h2, #botan h3, #botan p, #botan ul { margin: 0; padding: 0; }

#botan {
  font-size: 16px;
  line-height: 1.6;
  max-width: 1080px;     /* お好みで変更可 */
  margin: 0 auto 2rem;
  padding: 0 16px;
  color: inherit;         /* テーマ側の本文色を尊重 */
}

/* 見出し・注釈 */
#botan .botan-header h2 {
  margin: .25rem 0 .5rem;
  font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem);
  font-weight: 700;
}
#botan .note {
  color: #666;
  font-size: .9rem;
  margin-bottom: .75rem;
}

/* 段パネル */
#botan .panel { margin: 1rem 0; }

/* 三分割・二分割（PC） */
#botan .panel.trio,
#botan .panel.duo {
  display: grid !important;   /* テーマのflex指定などに勝つ */
  gap: .75rem;
}
#botan .panel.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#botan .panel.duo  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* 候補ボタン群 */
#botan .candidates {
  display: flex !important;
  flex-wrap: wrap;
  gap: .5rem;
}
#botan .candidates button {
  appearance: none;
  padding: .42rem .62rem;
  border: 1px solid #cfcfcf;
  background: #fff;
  border-radius: .42rem;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease, transform .04s ease;
}
#botan .candidates button:hover { transform: translateY(-1px); }
#botan .candidates button.is-selected {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* 結果 */
#botan .botan-results { margin-top: 1.25rem; }
#botan .result-list {
  list-style: none;
  padding: 0;
  margin: .75rem 0 2rem;
  display: grid;
  gap: .5rem;
}
#botan .result-list li {
  padding: .6rem .75rem;
  border: 1px solid #e1e1e1;
  border-radius: .5rem;
  background: #fafafa;
  word-break: break-word;
}

/* レスポンシブ（SPは1カラム） */
@media (max-width: 800px) {
  #botan { padding: 0 12px; }
  #botan .panel.trio { grid-template-columns: 1fr; }
  #botan .panel.duo  { grid-template-columns: 1fr; }
}

/* ===== デモ版パリティ: 外観 ===== */
#botan .muted{ color:#6b7280 }
#botan .btn{ padding:.45rem .7rem; border:1px solid #d1d5db; border-radius:.6rem; background:#fff; cursor:pointer }
#botan .btn:hover{ background:#fafafa }

/* 選択中バー */
#botan .botan-selectedbar{
  display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap;
  background:#f8f8f8; border:1px solid #eee; border-radius:.6rem; padding:.6rem .75rem; margin:.6rem 0 .5rem;
}
#botan .chipbar{ display:flex; gap:.45rem; flex-wrap:wrap; margin-bottom:.25rem }
#botan .chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .6rem; border-radius:999px; background:#eef4ff; border:1px solid #c7d7ff; font-size:.92rem;
}
#botan .chip .x{ cursor:pointer; opacity:.75 }

/* ステッパー */
#botan .stepper{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.4rem 0 .6rem }
#botan .step{
  padding:.5rem .75rem; border:1px solid #d1d5db; border-radius:.6rem; background:#f7f7f7; cursor:pointer;
}
#botan .step.active{ background:#2b7bff; color:#fff; border-color:#2b7bff }

/* ツールバー／候補 */
#botan .toolbar{ display:flex; justify-content:space-between; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.2rem 0 .4rem }
#botan .facet{ display:flex; gap:.5rem; flex-wrap:wrap }
#botan .kw{
  padding:.45rem .7rem; border:1px solid #cbd5e1; border-radius:999px; background:#fff; cursor:pointer;
}
#botan .kw.active{ background:#2b7bff; color:#fff; border-color:#2b7bff }
#botan .kw[aria-disabled="true"]{ opacity:.35; cursor:not-allowed }

/* 結果カード */
#botan .results-head{ margin-top:1rem; margin-bottom:.4rem }
#botan .result-list{ list-style:none; padding:0; margin:.5rem 0 2rem; display:grid; gap:.6rem }
#botan .result-list li{
  padding:.7rem .85rem; border:1px solid #e7e7e7; border-radius:.6rem; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.04);
}
#botan .result-list li .meta{ color:#666; font-size:.9rem; margin-top:.15rem }
#botan .result-list li .tags{ margin-top:.25rem; display:flex; flex-wrap:wrap; gap:.35rem }
#botan .result-list li .tags .t{ border:1px solid #e0e0e0; background:#fafafa; border-radius:.5rem; padding:.16rem .4rem; font-size:.8rem }

/* 空段非表示（以前のガードを継続） */
#botan .panel.is-empty{ display:none !important }
#botan .panel.trio > div.is-empty, #botan .panel.duo > div.is-empty{ display:none !important }