/* ============================================
   s-search-02 — Faceted search pages
   (treatment-search, equipment-search, case-search)
   ============================================ */

/* ── Inner container ── */
.s-search-02__inner {
  max-width: var(--width-inner);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* ── Breadcrumb ── */
.s-search-02__breadcrumb {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-md);
}

/* ── Header ── */
.s-search-02__header {
  container-type: inline-size;
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-6-xl);
  padding-inline: var(--container-padding);
}

.s-search-02__label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-hero);
  color: var(--color-primary);
  text-transform: uppercase;
}

.s-search-02__title {
  font-size: var(--font-size-3-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  margin-top: var(--space-xs);
}

.s-search-02__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin-top: var(--space-xs);
  line-height: var(--line-height-relaxed);
}

@container (min-width: 600px) {
  .s-search-02__title {
    font-size: var(--font-size-4-xl);
  }
}

/* ── Tabs override (treatment archive) ── */
.s-search-02__tabs {
  container-type: inline-size;
  padding: 0; /* s-tab-09 ベースの padding を打ち消す */
}

/* s-tab-09 の padding: var(--space-lg) と詳細度が同じため、複合セレクタで確実に上書き */
.s-tab-09.s-search-02__tabs {
  padding: 0;
  margin-block-start: var(--space-6-xl); /* タブ上は余白を確保 */
  position: relative;
  z-index: 41; /* sticky な検索パネル(z-index:40)より前面に出し、アクティブタブの三角を見せる */
  /* padding-bottom は不要: overflow:visible + z-index:41 により ::after 三角はパネル背景の上に正しく描画される（実測確認済み 2026-07-22） */
}

/* タブ下端の罫線を画面全幅に伸ばす（タブ本体は inner 幅のまま） */
.s-tab-09.s-search-02__tabs::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  border-bottom: 1px solid var(--color-border);
}

.s-search-02__tabs > .s-tab-09__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: none;
  max-width: var(--width-inner);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  margin-bottom: 0;
}

.s-search-02__tabs > .s-tab-09__nav .s-tab-09__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-2-xl);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-light);
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-border);
  border-bottom: 2px solid transparent;
  border-radius: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.s-search-02__tabs > .s-tab-09__nav .s-tab-09__nav-btn:first-child {
  border-radius: var(--radius-md) 0 0 0;
  border-right: none;
}

.s-search-02__tabs > .s-tab-09__nav .s-tab-09__nav-btn:last-child {
  border-radius: 0 var(--radius-md) 0 0;
}

.s-search-02__tabs > .s-tab-09__nav .s-tab-09__nav-btn:hover {
  color: var(--color-primary);
  background-color: var(--color-white);
}

.s-search-02__tabs > .s-tab-09__nav .s-tab-09__nav-btn.is-active {
  position: relative;
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* 吹き出し三角（下向き） */
.s-search-02__tabs > .s-tab-09__nav .s-tab-09__nav-btn.is-active::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  translate: -50% 0;
  border: 10px solid transparent;
  border-top-color: var(--color-primary);
  border-bottom: none;
}

@container (max-width: 599px) {
  .s-search-02__tabs > .s-tab-09__nav .s-tab-09__nav-btn {
    font-size: var(--font-size-sm);
    padding: var(--space-md) var(--space-lg);
  }
}

/* ── Search panel ── */
.s-search-02__panel {
  background-color: var(--color-bg-sub);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-3-xl);
  padding-inline: var(--container-padding);
  position: sticky;
  /* ヘッダー（fixed, 7.2rem コンテンツ + padding-block 1.2rem×2 = 2.4rem = 合計 9.6rem ≈ 94px）の下に収まるよう top をオフセット */
  top: calc(var(--header-height) + var(--space-3-xl));
  z-index: 40;
}

/* ── Main results area ── */
.s-search-02__main {
  container-type: inline-size;
  background-color: var(--color-white);
  padding-block: var(--space-6-xl);
  padding-inline: var(--container-padding);
}

/* ── Toolbar: count + sort + view toggle ── */
.s-search-02__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  margin-bottom: var(--space-3-xl);
}

.s-search-02__count {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.s-search-02__count-num {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

.s-search-02__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ── Sort select ── */
.s-search-02__sort-select {
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-5-xl) var(--space-xs) var(--space-md);
  background-color: var(--color-white);
  color: var(--color-text-light);
  appearance: none;
  background-image: url('data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 20 20%22 fill=%22%236b7280%22><path fill-rule=%22evenodd%22 d=%22M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z%22 clip-rule=%22evenodd%22 /></svg>');
  background-repeat: no-repeat;
  background-position: right var(--space-xs) center;
  background-size: var(--space-xl);
  outline: none;
  transition: border-color var(--transition-fast);
}

.s-search-02__sort-select:focus {
  border-color: var(--color-text-light);
}

/* ── View toggle buttons ── */
.s-search-02__view-toggle {
  display: flex;
  gap: var(--space-3-xs);
}

.s-search-02__view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs);
  border: none;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-sub);
  color: var(--color-text-light);
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.s-search-02__view-btn:hover {
  opacity: 0.7;
}

.s-search-02__view-btn--active {
  background-color: var(--color-text);
  color: var(--color-white);
}

/* ── Tax note ── */
.s-search-02__tax-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin-bottom: var(--space-xl);
}

/* ── Results grid (subgrid: 3 rows per card) ── */
.s-search-02__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@container (min-width: 600px) {
  .s-search-02__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

@container (min-width: 800px) {
  .s-search-02__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Pagination ── */
.s-search-02__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2-xs);
  margin-top: var(--space-6-xl);
}

.s-search-02__pagination .page-numbers .material-icons {
  font-size: var(--font-size-xl);
  line-height: var(--line-height-none);
}

/* ── Empty state ── */
.s-search-02__empty {
  text-align: center;
  padding-block: var(--space-9-xl);
  background-color: var(--color-bg-sub);
  border-radius: var(--radius-lg);
}

.s-search-02__empty-icon {
  font-size: var(--font-size-8-xl);
  color: var(--color-border);
  margin-bottom: var(--space-xl);
  display: block;
}

.s-search-02__empty-title {
  font-size: var(--font-size-xl);
  color: var(--color-text-light);
  margin-bottom: var(--space-xs);
}

.s-search-02__empty-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.s-search-02__empty-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-3-xl);
  padding: var(--space-md) var(--space-3-xl);
  background-color: var(--color-text);
  color: var(--color-white);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

.s-search-02__empty-btn:hover {
  opacity: 0.7;
}