/* ═══════════════════════════════════════════════════════════════════════════
   PRODUCT LIST — 상품목록 전용 스타일 (shared styles in shared/detail-view.css)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 레이아웃: 풀스크린 그리드 ───────────────────────────────────────────── */

.product-list-page-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
}


/* ─── 기간선택 슬라이드 ──────────────────────────────────────────────────── */

.period-selector {
  display: flex;
  align-items: center;
  gap: 0;
  height: 100%;
}

.period-selector__toggle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 26px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.05);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: -0.02em;
  transition: background 0.1s ease;
}

.period-selector__toggle svg {
  flex-shrink: 0;
  color: var(--text-subtle, #5f6368);
}

.period-selector__toggle:hover {
  background: rgba(0, 0, 0, 0.08);
}

.period-selector__chips {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: opacity 0.1s ease;
  margin-right: 0;
}

.period-selector.is-open .period-selector__chips {
  max-width: 400px;
  opacity: 1;
  margin-right: var(--space-2);
}

.period-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.05);
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--text-subtle, #5f6368);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  letter-spacing: -0.01em;
  transition: background 0.12s, color 0.12s;
}

.period-chip:hover {
  background: rgba(0, 0, 0, 0.08);
}

.period-chip:has(input:checked) {
  background: rgba(27, 42, 74, 0.12);
  color: #1b2a4a;
  font-weight: 600;
}

.period-chip input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ─── 기간별 대여료 2줄 셀 ────────────────────────────────────────────────── */

.pls-cell--price { padding: 0 var(--space-1); text-align: right; vertical-align: middle; line-height: 1; }
.pls-price-rent { display: block; font-size: var(--font-size-xs); font-weight: 600; color: #1e293b; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-align: right; }
.pls-price-dep { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-base); color: #94a3b8; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; text-align: right; }

/* ─── 상품목록 전용 패널 오버라이드 ───────────────────────────────────────── */

#productListShell .pls-detail-panel {
  width: 25%;
  transition: transform 0.1s ease-out;
}

/* ─── 상품목록 전용 테이블 정렬 ───────────────────────────────────────────── */

.product-list-page-shell .plist-detail__table th,
.product-list-page-shell .plist-detail__table td { text-align: center !important; }

.product-list-page-shell .plist-detail__table--insurance-summary td,
.product-list-page-shell .plist-detail__table--insurance-summary th { text-align: center !important; vertical-align: top; }
.product-list-page-shell .insurance-cell-wrap { white-space: normal !important; word-break: keep-all; }