/* Hシーン一覧表
   色・文字サイズは下の変数で調整できます */
.hst {
  --hst-line:      #e3e6eb;   /* 罫線 */
  --hst-head-bg:   #f5f6f8;   /* 見出し行の背景 */
  --hst-head-text: #5b6370;   /* 見出し行の文字 */
  --hst-text:      #2b2f36;   /* 本文の文字 */
  --hst-sub:       #6b7280;   /* 補助の文字 */
  --hst-panel:     #f7f8fa;   /* 操作パネルの背景 */
  --hst-zebra:     #fafbfc;   /* 1行おきの背景 */
  --hst-reco-bg:   #fffaf0;   /* おすすめ行の背景 */
  --hst-star:      #f2a100;   /* ★の色 */
  --hst-chip-bg:   #eef1f6;   /* シチュエーションのラベル */
  --hst-chip-text: #3c4a5e;
  --hst-pos-line:  #cfd5de;   /* 体位/プレイのラベル（枠線） */
  --hst-accent:    #1e63c8;   /* ON の色 */
  --hst-accent-bg: #eef4ff;
  --hst-dash:      #b8bec6;   /* 「—」の色 */
  --hst-font-size: 14px;

  margin: 2em 0;
  color: var(--hst-text);
  font-size: var(--hst-font-size);
  line-height: 1.6;
}

.hst-title {
  margin-bottom: 8px;
  font-size: 1.07em;
  font-weight: 700;
}

/* ★の説明文 */
.hst-legend {
  margin: -2px 0 8px !important;
  color: var(--hst-sub);
  font-size: 12.5px;
  line-height: 1.5;
}
.hst-legend .hst-star { margin-right: 2px; }

/* ---------- 操作パネル（表示する項目・絞り込み） ---------- */
.hst-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--hst-panel);
  font-size: 12.5px;
}
.hst:not(.is-ready) .hst-controls { display: none; } /* JSが動かない環境では出さない */
.hst-ctrl-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hst-ctrl-row + .hst-ctrl-row {
  padding-top: 8px;
  border-top: 1px solid var(--hst-line);
}
.hst-ctrl-label {
  flex: 0 0 8.8em;
  white-space: nowrap;
  padding-top: 4px;
  color: var(--hst-sub);
  font-weight: 700;
  line-height: 1.4;
}
.hst-ctrl-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* 表示する項目（チェックボックス） */
.hst-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 10px 3px 8px;
  border: 1px solid var(--hst-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hst-sub);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, color .15s, background .15s;
}
.hst-toggle input {
  width: 14px;
  height: 14px;
  margin: 0 !important;
  accent-color: var(--hst-accent);
  cursor: pointer;
}
.hst-toggle:has(input:checked) {
  border-color: var(--hst-accent);
  background: var(--hst-accent-bg);
  color: var(--hst-accent);
  font-weight: 700;
}
.hst-toggle:has(input:focus-visible) { outline: 2px solid var(--hst-accent); outline-offset: 2px; }
.hst-spoiler {
  padding: 0 5px;
  border-radius: 3px;
  background: #fff1db;
  color: #a35d00;
  font-size: 10px;
  font-weight: 700;
}

/* 絞り込みボタン */
.hst-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--hst-line);
  border-radius: 999px;
  background: #fff;
  color: var(--hst-text);
  font: inherit;
  font-size: 12.5px;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.hst-filter:hover { border-color: var(--hst-accent); }
.hst-filter-n {
  min-width: 1.7em;
  padding: 0 5px;
  border-radius: 999px;
  background: #eef0f3;
  color: var(--hst-sub);
  font-size: 10.5px;
  text-align: center;
}
.hst-filter.is-on {
  border-color: var(--hst-accent);
  background: var(--hst-accent);
  color: #fff;
  font-weight: 700;
}
.hst-filter.is-on .hst-filter-n { background: rgba(255,255,255,.25); color: #fff; }
.hst-filter-reco .hst-star { margin-right: 0; }
.hst-filter-reco.is-on { border-color: var(--hst-star); background: var(--hst-star); }
.hst-filter-reco.is-on .hst-star { color: #fff; }
.hst-filter.is-zero,
.hst-filter:disabled {
  opacity: .35;
  cursor: not-allowed;
}
.hst-filter.is-zero:hover { border-color: var(--hst-line); }
.hst-filter:focus-visible { outline: 2px solid var(--hst-accent); outline-offset: 2px; }

.hst-filter-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
  padding-top: 8px;
  border-top: 1px solid var(--hst-line);
  font-size: 13px;
}
.hst-filter-status[hidden] { display: none; }
.hst-filter-result b { color: var(--hst-accent); }
.hst-filter-result strong { margin: 0 1px; }
.hst-filter-clear {
  margin: 0;
  padding: 3px 12px;
  border: 1px solid var(--hst-line);
  border-radius: 6px;
  background: #fff;
  color: var(--hst-sub);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.hst-filter-clear:hover { border-color: var(--hst-accent); color: var(--hst-accent); }

/* ---------- 表（入りきらない時は改行を増やさず、表だけ横スクロール） ---------- */
.hst-scroll-outer { position: relative; }
.hst-scroll-outer::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 28px;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}
.hst.is-scrollable:not(.is-end) .hst-scroll-outer::after { opacity: 1; }
.hst-scroll {
  overflow-x: auto;
  border: 1px solid var(--hst-line);
  border-radius: 10px;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}
.hst-table {
  width: max-content;
  min-width: 100%;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: .96em;
  line-height: 1.55;
}
.hst-table th,
.hst-table td {
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hst-line) !important;
  background: #fff !important;
  color: var(--hst-text) !important;
  text-align: left !important;
  vertical-align: top;
  font-weight: 400;
}
.hst-table thead th {
  background: var(--hst-head-bg) !important;
  color: var(--hst-head-text) !important;
  font-size: .9em;
  font-weight: 700;
  white-space: nowrap;
}
.hst-table tbody tr.hst-alt > * { background: var(--hst-zebra) !important; }
.hst-table tbody tr.hst-reco > * { background: var(--hst-reco-bg) !important; }
.hst-table tbody tr.hst-last > * { border-bottom: 0 !important; }

/* 上限より後ろの行・絞り込みで外れた行（HTMLには出力したまま、見た目だけ隠す） */
.hst-table tbody tr.hst-off { display: none; }

/* 列ごとの幅・折り返し */
.hst-table .hst-c-name,
.hst-table .hst-c-heroine,
.hst-table .hst-c-place { white-space: nowrap; }
.hst-table .hst-c-name      { font-weight: 700; }
.hst-table .hst-c-condition { min-width: 14em; max-width: 22em; }
.hst-table .hst-c-comment   { min-width: 16em; max-width: 26em; }
.hst-table .hst-c-situations .hst-chips,
.hst-table .hst-c-positions .hst-chips { flex-wrap: nowrap; }

/* ★だけの列（シーン名を入力していない表のとき） */
.hst-table .hst-c-star {
  width: 1px;
  padding-left: 10px !important;
  padding-right: 4px !important;
  text-align: center !important;
  white-space: nowrap;
}
.hst-table .hst-c-star .hst-star { margin: 0; }
.hst-star { margin-right: 4px; color: var(--hst-star); }
.hst-dash { color: var(--hst-dash); }

/* ラベル：シチュエーション（塗り）／体位/プレイ（枠線） */
.hst-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hst-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: .82em;
  line-height: 1.6;
  white-space: nowrap;
}
.hst-chip-situations { background: var(--hst-chip-bg); color: var(--hst-chip-text); }
.hst-chip-positions  { border: 1px solid var(--hst-pos-line); background: #fff; color: var(--hst-text); }

/* 非表示の列 */
.hst-hide-name       .hst-c-name,
.hst-hide-heroine    .hst-c-heroine,
.hst-hide-place      .hst-c-place,
.hst-hide-condition  .hst-c-condition,
.hst-hide-positions  .hst-c-positions,
.hst-hide-situations .hst-c-situations,
.hst-hide-comment    .hst-c-comment { display: none !important; }

/* 絞り込みで0件 */
.hst-noresult {
  margin: 10px 0 0 !important;
  color: var(--hst-sub);
  font-size: 13px;
  text-align: center;
}

/* もっと見る */
.hst-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.hst-more[hidden] { display: none; }
.hst:not(.is-ready) .hst-more { display: none; }
.hst-more button {
  margin: 0;
  padding: 8px 22px;
  border: 1px solid var(--hst-accent);
  border-radius: 999px;
  background: #fff;
  color: var(--hst-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.hst-more .hst-more-btn:hover { background: var(--hst-accent); color: #fff; }
.hst-more .hst-all-btn {
  border-color: var(--hst-line);
  color: var(--hst-sub);
  font-weight: 400;
}
.hst-more .hst-all-btn:hover { border-color: var(--hst-accent); color: var(--hst-accent); }

/* 合計・スクロールのヒント */
.hst-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 2px 12px;
  margin: 8px 2px 0;
}
.hst-hint { display: none; color: var(--hst-sub); font-size: 11.5px; }
.hst.is-scrollable .hst-hint { display: inline; }
.hst-total {
  margin: 0 0 0 auto !important;
  color: var(--hst-sub);
  font-size: 12.5px;
  white-space: nowrap;
}
.hst-total b { margin: 0 2px; color: var(--hst-text); font-weight: 700; }

/* 読み上げ用（画面には出さない） */
.hst-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.hst-placeholder {
  padding: 14px;
  border: 1px dashed var(--hst-line);
  border-radius: 10px;
  color: var(--hst-sub);
  font-size: 13px;
  text-align: center;
}

/* スマホ */
@media (max-width: 600px) {
  .hst { --hst-font-size: 13.5px; }
  .hst-table th,
  .hst-table td { padding: 8px 10px !important; }
  .hst-table .hst-c-condition { min-width: 12em; max-width: 16em; }
  .hst-table .hst-c-comment { min-width: 13em; max-width: 18em; }
  .hst-controls { padding: 10px; font-size: 12px; }
  .hst-ctrl-row { flex-direction: column; gap: 5px; }
  .hst-ctrl-label { flex: none; padding-top: 0; }
  .hst-ctrl-items { gap: 5px; }
  .hst-more button { flex: 1 1 auto; padding: 9px 12px; }
}