/* =============================================================
   treatments.css — C2 시술 탐색(/treatments) 페이지 전용
   공통 컴포넌트(헤더·푸터·칩·시술 카드 매소너리·FAB)는 customer-common.css 참조.
   시안: Figma TheKKOT-yhlee · node 9:645(모바일 393)
   ============================================================= */

/* ---------------------------------------------------------------
   페이지 타이틀 (시안 page-list-title · px16 py30 · gap 8/12)
   --------------------------------------------------------------- */
.t-page-head {
  padding-top: 30px;
  padding-bottom: 30px;
}

.t-page-head .kb-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.t-page-title {
  color: var(--kb-gray-900);
  font-size: 1.375rem;
  font-weight: 700;
}

.t-page-sub {
  margin-top: 12px;
  color: var(--kb-gray-600);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 22px;
}

.t-chip-row {
  padding: 12px 0;
}

/* ---------------------------------------------------------------
   회복기간 필터 (시안 Frame 200) — 라벨 왼쪽 · 구간 오른쪽, 세로선 구분
   --------------------------------------------------------------- */
.t-downtime-band {
  border-bottom: 1px solid var(--kb-gray-200);
}

.t-downtime-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.t-downtime-label {
  color: var(--kb-gray-700);
  font-size: 0.8125rem;
  font-weight: 600;
}

.t-downtime-options {
  display: flex;
  align-items: center;
  gap: 8px;
}

.t-downtime-options button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--kb-gray-600);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.t-downtime-options button[aria-pressed="true"] {
  color: var(--kb-gray-800);
  font-weight: 600;
}

/* 구간 사이 세로선 (시안 Line 5~7 · 12px · gray300) */
.t-downtime-options button + button::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
  background: var(--kb-gray-300);
}

/* ---------------------------------------------------------------
   리스트 (시안 리스트 박스 · pt24 pb30)
   --------------------------------------------------------------- */
.t-list {
  padding-top: 12px;
  padding-bottom: 30px;
}

/* ---------------------------------------------------------------
   반응형 — 데스크탑은 C1 과 같은 패턴 (프레임 44 · 넓은 타이포)
   --------------------------------------------------------------- */
@media (min-width: 1100px) {
  .t-page-head {
    padding-top: 50px;
    padding-bottom: 30px;
  }

  .t-page-title {
    font-size: 1.75rem;
  }

  .t-list {
    padding-bottom: 60px;
  }
}