/* ==========================================================================
 * BTO Spec Set frontend styles
 * Loaded only when [bto_spec_set] shortcode is present.
 *
 * Design tokens are copies of tables.css / gazlog-spec — keep in sync if
 * `pc-parts-price-tracker` updates its palette.
 * ========================================================================== */

.bto-spec-set {
  --gls-accent:         #2563eb;
  --gls-accent-bg:      #eff6ff;
  --gls-accent-text:    #1d4ed8;
  --gls-success:        #16a34a;
  --gls-success-bg:     #ecfdf5;
  --gls-warning:        #d97706;
  --gls-warning-bg:     #fef3c7;
  --gls-danger:         #dc2626;
  --gls-danger-bg:      #fee2e2;
  --gls-rank-s:         #DAA520;
  --gls-rank-a:         #228B22;
  --gls-rank-b:         #1E90FF;
  --gls-rank-c:         #FF8C00;
  --gls-rank-d:         #DC143C;
  --gls-current-bg:     #fffbeb;
  --gls-radius:         6px;
  --gls-radius-sm:      4px;
  --gls-shadow:         0 2px 8px -4px rgba(0, 0, 0, 0.15);
  --gls-shadow-strong:  0 6px 20px -8px rgba(0, 0, 0, 0.18);
  --gls-font:           "Yu Gothic", "Meiryo", -apple-system, "Segoe UI", sans-serif;
  --gls-mono:           "SF Mono", "Menlo", "Consolas", monospace;
  --gls-border:         #e2e8f0;
  --gls-border-strong:  #cbd5e1;
  --gls-text:           #1e293b;
  --gls-muted:          #64748b;
  --gls-bg-row-hover:   #f1f5f9;
  --gls-bg-stripe:      #fafbfc;
  --gls-bg-thead:       #f8fafc;

  font-family: var(--gls-font);
  color: var(--gls-text);
  font-size: 14px;
  line-height: 1.55;
  margin: 1.5em 0;
}

.bto-spec-set *, .bto-spec-set *::before, .bto-spec-set *::after { box-sizing: border-box; }

.bto-spec-set__title {
  font-size: 1.25em;
  font-weight: 700;
  margin: 0 0 0.4em;
  color: var(--gls-text);
}
.bto-spec-set__desc {
  color: var(--gls-muted);
  margin: 0 0 1em;
  font-size: 0.95em;
}
.bto-spec-set-error {
  color: #b91c1c;
  padding: 8px 12px;
  background: var(--gls-danger-bg);
  border-radius: var(--gls-radius);
  border: 1px solid #fecaca;
}
.bto-spec-set__muted { color: var(--gls-muted); }
.bto-spec-set__sale-meta { font-size: 0.75em; font-weight: 400; color: var(--gls-muted); margin-left: 0.4em; }

/* --------------------------------------------------------------------------
 * Table wrap & base
 * -------------------------------------------------------------------------- */

.bto-spec-set__table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  scrollbar-gutter: stable;
  border: 1px solid var(--gls-border);
  border-radius: var(--gls-radius);
  background: #fff;
  box-shadow: var(--gls-shadow);
}

.bto-spec-set__table-wrap > table {
  width: auto;
  min-width: 100%;
}

.bto-spec-set__table,
.bto-spec-set__matrix,
.bto-spec-set__recommend,
.bto-spec-set__accordion-table,
.bto-spec-set__sale-table,
.bto-spec-set__inner {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.92em;
}

.bto-spec-set__th {
  background: var(--gls-bg-thead);
  font-weight: 600;
  text-align: left;
  padding: 8px 8px;
  border-bottom: 2px solid var(--gls-border-strong);
  color: var(--gls-text);
  white-space: nowrap;
  word-break: keep-all;
  font-size: 0.82em;
}
.bto-spec-set__td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--gls-border);
  vertical-align: middle;
  font-size: 0.88em;
  line-height: 1.4;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}
.bto-spec-set__row-summary:nth-of-type(4n+3) > .bto-spec-set__td { background: var(--gls-bg-stripe); }
.bto-spec-set__row-summary:hover > .bto-spec-set__td { background: var(--gls-bg-row-hover); cursor: default; }
.bto-spec-set__row-summary > .bto-spec-set__td--toggle,
.bto-spec-set__row-summary > .bto-spec-set__td--buy { background: transparent !important; }

.bto-spec-set__row--on-sale .bto-spec-set__td { background: #fff7ed !important; }
.bto-spec-set__row--cheapest .bto-spec-set__td { background: var(--gls-success-bg) !important; }

/* --------------------------------------------------------------------------
 * Model link & external icon
 * -------------------------------------------------------------------------- */

.bto-spec-set__model-link {
  color: var(--gls-accent);
  text-decoration: none;
  font-weight: 500;
}
.bto-spec-set__model-link:hover { text-decoration: underline; color: var(--gls-accent-text); }
.bto-spec-set__model-text { color: var(--gls-text); }
.bto-spec-set__model-link,
.bto-spec-set__model-text,
.bto-spec-set__cell-main {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}
.bto-spec-set__price .bto-spec-set__cell-main,
.bto-spec-set__td--bto_price .bto-spec-set__cell-main,
.bto-spec-set__td--price .bto-spec-set__cell-main,
.bto-spec-set__td--diy_total .bto-spec-set__cell-main,
.bto-spec-set__td--diff .bto-spec-set__cell-main,
.bto-spec-set__td--rank .bto-spec-set__cell-main,
.bto-spec-set__td--memory .bto-spec-set__cell-main,
.bto-spec-set__td--storage .bto-spec-set__cell-main {
  display: inline;
  white-space: nowrap;
  overflow: visible;
  -webkit-line-clamp: unset;
}
/* 外部リンクの ↗ アイコンは廃止 (色 / underline で十分判別可能) */
.bto-spec-set__external-icon { display: none; }

/* --------------------------------------------------------------------------
 * Vendor badge
 * -------------------------------------------------------------------------- */

.bto-spec-set__vendor {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 500;
  background: var(--gls-accent-bg);
  color: var(--gls-accent-text);
  border: 1px solid #c7d2fe;
}
.bto-spec-set__vendor--dospara   { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.bto-spec-set__vendor--mouse     { background: #ecfeff; color: #0e7490; border-color: #a5f3fc; }
.bto-spec-set__vendor--pc_koubou { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.bto-spec-set__vendor--frontier  { background: #fae8ff; color: #86198f; border-color: #f5d0fe; }
.bto-spec-set__vendor--tsukumo   { background: #ecfccb; color: #3f6212; border-color: #d9f99d; }
.bto-spec-set__vendor--sycom     { background: #f3e8ff; color: #6b21a8; border-color: #ddd6fe; }
.bto-spec-set__vendor--ark       { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }
.bto-spec-set__vendor--storm     { background: #ddd6fe; color: #4338ca; border-color: #c4b5fd; }
.bto-spec-set__vendor--lenovo    { background: #fecaca; color: #991b1b; border-color: #fca5a5; }
.bto-spec-set__vendor--alienware { background: #1e293b; color: #f1f5f9; border-color: #334155; }

/* --------------------------------------------------------------------------
 * Rank badge & diff color
 * -------------------------------------------------------------------------- */

.bto-spec-set__rank-badge {
  display: inline-block;
  min-width: 28px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9em;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  background: var(--gls-muted);
}
.bto-spec-set__rank--s .bto-spec-set__rank-badge { background: var(--gls-rank-s); }
.bto-spec-set__rank--a .bto-spec-set__rank-badge { background: var(--gls-rank-a); }
.bto-spec-set__rank--b .bto-spec-set__rank-badge { background: var(--gls-rank-b); }
.bto-spec-set__rank--c .bto-spec-set__rank-badge { background: var(--gls-rank-c); }
.bto-spec-set__rank--d .bto-spec-set__rank-badge { background: var(--gls-rank-d); }

.bto-spec-set__diff--neg  { color: var(--gls-success); font-weight: 600; }
.bto-spec-set__diff--pos  { color: var(--gls-danger); font-weight: 600; }
.bto-spec-set__diff--zero { color: var(--gls-muted); }
.bto-spec-set__delta {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.85em;
  color: var(--gls-muted);
}

/* --------------------------------------------------------------------------
 * Price column
 * -------------------------------------------------------------------------- */

.bto-spec-set__price {
  font-variant-numeric: tabular-nums;
  font-family: var(--gls-mono);
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}
.bto-spec-set__sale-price { color: var(--gls-danger); font-size: 1.05em; }

/* --------------------------------------------------------------------------
 * Buy CTA column (per-row inline 公式 → button)
 * -------------------------------------------------------------------------- */

.bto-spec-set__td--buy {
  width: 76px;
  min-width: 76px;
  text-align: center;
  padding: 6px 4px !important;
  background: var(--gls-bg-stripe);
}
.bto-spec-set__buy-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px 8px;
  border-radius: 4px;
  background: var(--gls-accent);
  color: #fff !important;
  text-decoration: none;
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid var(--gls-accent);
  transition: background-color 0.15s ease, transform 0.05s ease;
  line-height: 1.3;
}
.bto-spec-set__buy-btn:hover { background: var(--gls-accent-text); border-color: var(--gls-accent-text); color: #fff; }
.bto-spec-set__buy-btn:active { transform: translateY(1px); }
.bto-spec-set__buy-btn::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
}

/* --------------------------------------------------------------------------
 * Row-pair detail expansion (gazlog spec-matrix-table pattern):
 *   <tr class="bto-spec-set__row-summary">  ← ヘッダ + データ
 *   <tr class="bto-spec-set__row-detail" hidden> ← フル幅 colspan で展開
 * -------------------------------------------------------------------------- */

.bto-spec-set__td--toggle {
  width: 38px;
  text-align: center;
  padding: 0 !important;
  background: var(--gls-bg-stripe);
}
.bto-spec-set__row-toggle {
  appearance: none;
  background: transparent;
  border: 1px solid var(--gls-border);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  color: var(--gls-accent);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background-color 0.12s ease;
}
.bto-spec-set__row-toggle:hover {
  background: var(--gls-accent-bg);
  border-color: var(--gls-accent);
}
.bto-spec-set__row-toggle:focus-visible {
  outline: 2px solid var(--gls-accent);
  outline-offset: 1px;
}
.bto-spec-set__row-toggle-icon {
  display: inline-block;
  width: 10px;
  height: 6px;
  position: relative;
  transition: transform 0.15s ease;
}
.bto-spec-set__row-toggle-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}
.bto-spec-set__row-toggle[aria-expanded="true"] .bto-spec-set__row-toggle-icon {
  transform: rotate(180deg);
}
.bto-spec-set__row-summary[data-detail-open="true"] {
  background: var(--gls-accent-bg);
}
.bto-spec-set__row-summary[data-detail-open="true"] .bto-spec-set__td--toggle {
  background: var(--gls-accent-bg);
}

/* Detail row — フル幅展開 */
.bto-spec-set__row-detail > td {
  padding: 0 !important;
  background: var(--gls-bg-stripe);
  border-bottom: 2px solid var(--gls-border-strong);
}
.bto-spec-set__row-detail .bto-spec-set__detail-body {
  width: min(960px, 100%);
  max-width: calc(100vw - 32px);
  padding: 16px 18px 18px;
  background: #fff;
  border-top: 3px solid var(--gls-accent);
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

/* --------------------------------------------------------------------------
 * matrix-table layout (apply to grouped_list.flat + list)
 * -------------------------------------------------------------------------- */
.bto-spec-set__matrix-table {
  table-layout: auto;
  border-collapse: collapse;
  background: #fff;
}
.bto-spec-set__matrix-table .bto-spec-set__td,
.bto-spec-set__matrix-table .bto-spec-set__th {
  vertical-align: middle;
  white-space: nowrap;
  word-wrap: normal;
  overflow-wrap: normal;
  word-break: keep-all;
}
.bto-spec-set__matrix-table .bto-spec-set__td--model_name,
.bto-spec-set__matrix-table .bto-spec-set__td--cpu,
.bto-spec-set__matrix-table .bto-spec-set__td--gpu,
.bto-spec-set__td--config,
.bto-spec-set__td--reason,
.bto-spec-set__td--usecase {
  white-space: normal;
}
.bto-spec-set__matrix-table .bto-spec-set__row-detail > td {
  white-space: normal;
  word-wrap: normal;
  overflow-wrap: normal;
}

/* colgroup widths */
.bto-spec-set__col-toggle  { width: 38px; }
.bto-spec-set__col-vendor  { width: 84px; }
.bto-spec-set__col-model   { width: auto; min-width: 140px; }
.bto-spec-set__col-cpu     { width: 130px; }
.bto-spec-set__col-gpu     { width: 130px; }
.bto-spec-set__col-price   { width: 130px; }
.bto-spec-set__col-buy     { width: 76px; }

.bto-spec-set__th--site,
.bto-spec-set__td--site,
.bto-spec-set__th--source_site,
.bto-spec-set__td--source_site { min-width: 86px; }
.bto-spec-set__th--model_name,
.bto-spec-set__td--model_name { min-width: 210px; max-width: 280px; }
.bto-spec-set__th--cpu,
.bto-spec-set__td--cpu,
.bto-spec-set__th--gpu,
.bto-spec-set__td--gpu { min-width: 118px; max-width: 170px; }
.bto-spec-set__th--memory,
.bto-spec-set__td--memory { min-width: 76px; }
.bto-spec-set__th--storage,
.bto-spec-set__td--storage { min-width: 88px; }
.bto-spec-set__th--bto_price,
.bto-spec-set__td--bto_price,
.bto-spec-set__th--price,
.bto-spec-set__td--price,
.bto-spec-set__th--diy_total,
.bto-spec-set__td--diy_total,
.bto-spec-set__th--diff,
.bto-spec-set__td--diff { min-width: 98px; }
.bto-spec-set__th--rank,
.bto-spec-set__td--rank { min-width: 72px; }

/* Price column dual-row (price + diff) */
.bto-spec-set__price-main {
  font-family: var(--gls-mono);
  font-weight: 700;
  font-size: 0.95em;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
  line-height: 1.2;
}
.bto-spec-set__price-diff {
  font-size: 0.78em;
  text-align: right;
  white-space: nowrap;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.bto-spec-set__price-diff.bto-spec-set__diff--neg { color: var(--gls-success); }
.bto-spec-set__price-diff.bto-spec-set__diff--pos { color: var(--gls-danger); }
.bto-spec-set__price-diff.bto-spec-set__diff--zero { color: var(--gls-muted); }

/* --------------------------------------------------------------------------
 * Tab UI inside detail panel
 * -------------------------------------------------------------------------- */

.bto-spec-set__tabs {
  margin: 0;
}
.bto-spec-set__tab-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--gls-border);
  margin-bottom: 10px;
}
.bto-spec-set__tab-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  padding: 5px 11px;
  font-size: 0.82em;
  cursor: pointer;
  color: var(--gls-muted);
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
  font-family: inherit;
  white-space: nowrap;
  line-height: 1.5;
}
.bto-spec-set__tab-btn:hover {
  color: var(--gls-text);
  background: var(--gls-bg-stripe);
}
.bto-spec-set__tab-btn:focus-visible {
  outline: 2px solid var(--gls-accent);
  outline-offset: -2px;
}
.bto-spec-set__tab-btn.is-active {
  color: var(--gls-accent);
  font-weight: 600;
  background: #fff;
  border-color: var(--gls-border);
  border-bottom-color: #fff;
}
.bto-spec-set__tab-panel {
  padding: 4px 2px 8px;
  min-height: 110px;
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
}
.bto-spec-set__tab-panel[hidden] { display: none !important; }

/* --- panel content shared --- */
.bto-spec-set__kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 14px;
  margin: 0;
  font-size: 0.88em;
}
.bto-spec-set__kv--wide { grid-template-columns: max-content 1fr; }
.bto-spec-set__kv dt {
  color: var(--gls-muted);
  font-weight: 500;
  white-space: nowrap;
}
.bto-spec-set__kv dd {
  margin: 0;
  color: var(--gls-text);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  overflow-wrap: break-word;
}

.bto-spec-set__spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
.bto-spec-set__spec-card {
  min-width: 0;
  background: var(--gls-bg-stripe);
  border: 1px solid var(--gls-border);
  border-radius: var(--gls-radius-sm);
  padding: 10px 12px;
}
.bto-spec-set__spec-card-title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.bto-spec-set__detail-kind {
  display: inline-block;
  padding: 1px 6px;
  background: var(--gls-accent);
  color: #fff;
  border-radius: 3px;
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.bto-spec-set__bench-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 14px;
}
.bto-spec-set__bench-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.88em;
  padding: 2px 0;
}
.bto-spec-set__bench-key { color: var(--gls-muted); }
.bto-spec-set__bench-val { font-variant-numeric: tabular-nums; }

.bto-spec-set__inner-mini {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.85em;
}
.bto-spec-set__inner-mini th,
.bto-spec-set__inner-mini td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--gls-border);
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.bto-spec-set__inner-mini th {
  background: var(--gls-bg-stripe);
  font-weight: 600;
  font-size: 0.95em;
}
.bto-spec-set__inner-mini td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bto-spec-set__fps-pivot {
  table-layout: fixed;
}
.bto-spec-set__fps-pivot th:first-child,
.bto-spec-set__fps-pivot td:first-child {
  width: 42%;
}
.bto-spec-set__fps-pivot th:not(:first-child),
.bto-spec-set__fps-pivot td:not(:first-child) {
  white-space: nowrap;
}

.bto-spec-set__detail-raw {
  font-size: 0.82em;
  color: var(--gls-muted);
  font-family: var(--gls-mono);
  word-break: break-word;
}
.bto-spec-set__detail-cautions {
  color: var(--gls-warning);
  font-size: 0.88em;
}

/* --------------------------------------------------------------------------
 * Cost tab: per-part DIY breakdown
 * -------------------------------------------------------------------------- */

.bto-spec-set__cost-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--gls-bg-stripe);
  border-left: 3px solid var(--gls-accent);
  border-radius: 4px;
  align-items: baseline;
}
.bto-spec-set__cost-row { display: contents; }
.bto-spec-set__cost-label { color: var(--gls-muted); font-size: 0.88em; }
.bto-spec-set__cost-bto,
.bto-spec-set__cost-diy {
  font-variant-numeric: tabular-nums;
  font-size: 1em;
  font-weight: 700;
}
.bto-spec-set__cost-diff {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.bto-spec-set__cost-diff small { font-weight: 400; margin-left: 4px; }
.bto-spec-set__cost-rank {
  color: var(--gls-muted);
  font-size: 0.85em;
}
.bto-spec-set__cost-confidence {
  display: block;
  margin-top: 8px;
  color: var(--gls-muted);
  font-size: 0.78em;
}

.bto-spec-set__diy-table {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: 0.85em;
}
.bto-spec-set__diy-table th,
.bto-spec-set__diy-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--gls-border);
  text-align: left;
  vertical-align: top;
}
.bto-spec-set__diy-table th {
  background: var(--gls-bg-thead);
  font-weight: 600;
  font-size: 0.94em;
}
.bto-spec-set__diy-cat {
  font-weight: 600;
  color: var(--gls-text);
  width: 96px;
  white-space: nowrap;
}
.bto-spec-set__diy-raw {
  color: var(--gls-text);
  font-size: 0.95em;
  min-width: 0;
  max-width: none;
  word-break: break-word;
  white-space: normal;
}
.bto-spec-set__diy-price {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bto-spec-set__diy-table tfoot td {
  background: var(--gls-bg-stripe);
  font-weight: 700;
}
.bto-spec-set__diy-table tfoot tr:first-child td {
  border-top: 2px solid var(--gls-border-strong);
}
.bto-spec-set__diy-total-label {
  text-align: right;
  color: var(--gls-muted);
  font-weight: 600;
}
.bto-spec-set__diy-source {
  color: var(--gls-muted);
  font-size: 0.78em;
  display: block;
  margin-top: 1px;
}

/* --------------------------------------------------------------------------
 * CTA button (inside detail panel, tab-independent)
 * -------------------------------------------------------------------------- */

.bto-spec-set__detail-cta-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--gls-border-strong);
  text-align: center;
}
.bto-spec-set__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gls-accent);
  color: #fff;
  padding: 8px 18px;
  border-radius: var(--gls-radius);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95em;
  transition: background-color 0.15s ease, transform 0.05s ease;
}
.bto-spec-set__cta:hover { background: var(--gls-accent-text); color: #fff; }
.bto-spec-set__cta:active { transform: translateY(1px); }
.bto-spec-set__cta::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid currentColor;
}
.bto-spec-set__cta-note {
  display: block;
  margin-top: 6px;
  color: var(--gls-muted);
  font-size: 0.75em;
}

/* --------------------------------------------------------------------------
 * Sale-mode specific
 * -------------------------------------------------------------------------- */

.bto-spec-set__sale-badge {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  background: var(--gls-danger-bg);
  color: #b91c1c;
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-size: 0.78em;
  line-height: 1.4;
  white-space: nowrap;
}
.bto-spec-set__sale-badge strong { color: var(--gls-danger); font-weight: 700; }
.bto-spec-set__sale-badge em { font-style: normal; font-size: 0.92em; color: #7f1d1d; }

.bto-spec-set__alt {
  margin-top: 6px;
  font-size: 0.85em;
}
.bto-spec-set__alt-summary {
  cursor: pointer;
  color: var(--gls-accent);
  list-style: none;
}
.bto-spec-set__alt-summary::-webkit-details-marker { display: none; }
.bto-spec-set__alt-list {
  list-style: none;
  padding-left: 1em;
  margin: 4px 0;
}
.bto-spec-set__alt-list li { margin: 2px 0; }
.bto-spec-set__alt-meta { color: var(--gls-muted); margin-left: 4px; }

/* --------------------------------------------------------------------------
 * Grouped-list specific
 * -------------------------------------------------------------------------- */

.bto-spec-set__groups {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bto-spec-set__group {
  background: #fff;
  border: 1px solid var(--gls-border);
  border-radius: var(--gls-radius);
  overflow: hidden;
  box-shadow: var(--gls-shadow);
}
/* group-summary 本体は list-item (上で定義済み)、layout は inner span に */
.bto-spec-set__group-summary-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 1fr 24px;
  gap: 10px;
  padding: 12px 16px;
  align-items: center;
  background: var(--gls-bg-thead);
  pointer-events: none;       /* native summary click を妨げない */
}
.bto-spec-set__group-summary:hover > .bto-spec-set__group-summary-inner {
  background: var(--gls-bg-row-hover);
}
.bto-spec-set__group-label { font-size: 0.98em; color: var(--gls-text); }
.bto-spec-set__group-count {
  text-align: center;
  font-size: 0.85em;
  color: var(--gls-muted);
  background: #fff;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--gls-border);
}
.bto-spec-set__group-range {
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
}
.bto-spec-set__group-min { color: var(--gls-success); font-weight: 600; }
.bto-spec-set__group-max { color: var(--gls-text); }
.bto-spec-set__group-sep { color: var(--gls-muted); margin: 0 4px; }
.bto-spec-set__group-chevron {
  text-align: right;
  color: var(--gls-muted);
  width: 8px;
  height: 8px;
  display: inline-block;
  position: relative;
  transition: transform 0.15s ease;
}
.bto-spec-set__group-chevron::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 6px solid currentColor;
}
.bto-spec-set__group[open] > .bto-spec-set__group-summary .bto-spec-set__group-chevron { transform: rotate(90deg); }
.bto-spec-set__group-body { padding: 0; }
.bto-spec-set__cheapest-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  background: var(--gls-success);
  color: #fff;
  border-radius: 3px;
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* flat モード (auto-flatten 時) のグループラベル */
.bto-spec-set__group-flat-label {
  margin: 1.2em 0 0.4em;
  font-size: 1.05em;
  font-weight: 600;
  color: var(--gls-text);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--gls-border-strong);
}
.bto-spec-set--flat .bto-spec-set__group-flat-label:first-child { margin-top: 0; }

/* --------------------------------------------------------------------------
 * Recommend-mode specific
 * -------------------------------------------------------------------------- */

.bto-spec-set__td--usecase strong {
  display: block;
  font-size: 1em;
  margin-bottom: 2px;
}
.bto-spec-set__reason { color: var(--gls-muted); font-size: 0.88em; }
.bto-spec-set__td--reason { max-width: 200px; }

/* --------------------------------------------------------------------------
 * Matrix-mode specific
 * -------------------------------------------------------------------------- */

.bto-spec-set__matrix .bto-spec-set__row-label {
  background: var(--gls-bg-thead);
  text-align: left;
  padding: 12px;
  border-right: 2px solid var(--gls-border-strong);
  border-bottom: 1px solid var(--gls-border);
  font-weight: 600;
  vertical-align: top;
}
.bto-spec-set__matrix-cell {
  padding: 8px;
  border-bottom: 1px solid var(--gls-border);
  vertical-align: top;
  min-width: 160px;
}
.bto-spec-set__matrix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bto-spec-set__matrix-item {
  padding: 8px;
  background: #fff;
  border: 1px solid var(--gls-border);
  border-radius: var(--gls-radius-sm);
  font-size: 0.88em;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bto-spec-set__matrix-item:hover {
  border-color: var(--gls-accent);
  box-shadow: 0 0 0 3px var(--gls-accent-bg);
}
.bto-spec-set__matrix-item .bto-spec-set__model-link {
  font-size: 0.95em;
  line-height: 1.3;
}
.bto-spec-set__matrix-vendor { font-size: 0.85em; color: var(--gls-muted); }
.bto-spec-set__matrix-price { color: var(--gls-text); font-size: 0.95em; }

/* --------------------------------------------------------------------------
 * Inner table (nested in groups)
 * -------------------------------------------------------------------------- */

.bto-spec-set__inner {
  border: none;
  background: #fff;
}
.bto-spec-set__inner .bto-spec-set__th {
  background: #fdfdfd;
  font-size: 0.82em;
  padding: 8px 10px;
}
.bto-spec-set__inner .bto-spec-set__td {
  font-size: 0.88em;
  padding: 8px 10px;
}

/* --------------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .bto-spec-set__detail-grid { grid-template-columns: 1fr; }
  .bto-spec-set__detail-bench ul { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .bto-spec-set { font-size: 13px; }
  .bto-spec-set__title { font-size: 1.1em; }

  .bto-spec-set__th,
  .bto-spec-set__td {
    padding: 8px 8px;
    font-size: 0.85em;
  }
  .bto-spec-set__th { white-space: nowrap; }

  /* mobile: 列は隠さず、横スクロールで読めるようにする */
  .bto-spec-set__td--buy,
  .bto-spec-set__th--buy { display: table-cell; }

  /* row toggle compact */
  .bto-spec-set__td--toggle { width: 30px; }
  .bto-spec-set__row-toggle { width: 24px; height: 24px; }

  /* row-detail (full-width) body padding tighter */
  .bto-spec-set__row-detail .bto-spec-set__detail-body {
    width: min(100%, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    padding: 12px 10px;
  }

  /* matrix-table colgroup overrides on mobile */
  .bto-spec-set__col-toggle  { width: 30px; }
  .bto-spec-set__col-model   { min-width: 0; }
  .bto-spec-set__col-price   { width: 110px; }

  .bto-spec-set__group-summary-inner {
    grid-template-columns: minmax(0, 1fr) 24px;
    grid-template-rows: auto auto;
    gap: 4px;
    padding: 10px 12px;
  }
  .bto-spec-set__group-count,
  .bto-spec-set__group-range {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
  }
  .bto-spec-set__group-count { padding: 1px 6px; font-size: 0.78em; max-width: max-content; }
  .bto-spec-set__group-chevron { grid-column: 2; grid-row: 1 / 3; }

  .bto-spec-set__matrix-cell { min-width: 130px; }

  /* tab UI: モバイル時はナビをコンパクトに、パネル max-height を緩める */
  .bto-spec-set__tab-nav { gap: 1px; }
  .bto-spec-set__tab-btn { padding: 4px 7px; font-size: 0.75em; }
  .bto-spec-set__tab-panel { max-height: 420px; }
  .bto-spec-set__spec-grid { grid-template-columns: 1fr; gap: 8px; }
  .bto-spec-set__bench-list { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
 * Backwards-compatibility (legacy class names from earlier phase)
 * -------------------------------------------------------------------------- */

.bto-spec-set details > summary { list-style: none; }
.bto-spec-set h4 { font-size: 0.95em; margin: 8px 0 4px; }
.bto-spec-set ul { font-size: 0.9em; margin: 0; padding-left: 1.2em; }
.bto-spec-set .muted { color: var(--gls-muted); }
.bto-spec-set__matrix-cell ul { padding-left: 0; }
.bto-spec-set__row-label { background: var(--gls-bg-thead); }