/* ═══════════════════════════════════════════════════════════════════════════
   DETAIL VIEW — shared detail panel, detail card, and image viewer styles
   Used by: chat.css, product.css (and any page with a slide-out detail panel)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 상세 슬라이드 패널 (오버레이) ───────────────────────────────────────── */

.pls-detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; flex-direction: column; overflow: hidden;
  border: none;
  /* jpkerp 스타일 4코너 모두 라운드 */
  border-radius: var(--radius-ui);
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
}
.pls-detail-panel .panel-head {
  background: var(--new-bg-panel-head);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  min-height: var(--panel-head-height);
  height: var(--panel-head-height);
}
.pls-detail-panel.is-open { transform: translateX(0); }
.pls-detail-panel[hidden] { display: none; }
.pls-detail-panel .panel-body--detail { flex: 1 1 0; overflow: auto; scrollbar-gutter: stable; }
.pls-detail-panel .panel-head { scrollbar-gutter: stable; }

.product-list-page-shell .detail-actions-hidden { display: none !important; }

/* ─── 상세 카드 (기존 호환) ───────────────────────────────────────────────── */

.product-list-page-shell .detail-card { min-width: 0; }
.product-list-page-shell .detail-empty { display: flex; align-items: center; justify-content: center; min-height: 0; flex: 1 1 0; height: 100%; border: none; background: transparent; font-size: var(--font-size-main, 12px); color: var(--text-muted, #9ca3af); }

.product-list-page-shell .plist-detail { display: flex; flex-direction: column; gap: 0; }
.product-list-page-shell .panel-body--detail { padding: 0 !important; }
/* 데스크탑 상세 패널 — .m-pd--desktop 이 모든 규칙 담당.
   여기서는 폰트 상속만 유지 */
.product-list-page-shell .panel-body--detail .m-pd--desktop,
.product-list-page-shell .panel-body--detail .m-pd--desktop * {
  letter-spacing: -0.02em;
}
/* [DEPRECATED] — 위 compact 오버라이드들은 .m-pd--desktop 도입 전 잔재.
   product-detail-desktop.css 가 단일 규칙이 되도록 전부 제거. */
.product-list-page-shell .plist-detail__summary-top { display: flex; flex-direction: column; gap: var(--space-1); }
.product-list-page-shell .plist-detail__summary-line { min-width: 0; font-size: var(--font-size-base); line-height: 1.5; color: var(--text-main); word-break: break-word; }
.product-list-page-shell .plist-detail__summary-line--top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.product-list-page-shell .plist-detail__summary-line--model { font-size: var(--font-size-base); line-height: 1.5; color: var(--text-subtle); }
.product-list-page-shell .plist-detail__summary-line--meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.product-list-page-shell .plist-detail__meta-text { font-size: var(--font-size-base); color: var(--text-main); }
.product-list-page-shell .plist-detail__color-badges { display: inline-flex; gap: var(--space-1); }
.product-list-page-shell .plist-detail__summary-main { min-width: 0; font-size: var(--font-size-base); line-height: 1.5; font-weight: 600; color: var(--text-main); display: flex; align-items: center; gap: var(--space-2); }
.product-list-page-shell .plist-detail__summary-maker-model { font-weight: var(--font-weight-base); color: var(--text-subtle); font-size: var(--font-size-xs); }
.product-list-page-shell .plist-detail__summary-badges { flex: 0 0 auto; display: flex; justify-content: flex-end; }
.product-list-page-shell .plist-detail__summary-badges .badge-row { justify-content: flex-end; }

.product-list-page-shell .plist-detail__section { display: flex; flex-direction: column; gap: 2px; }
.product-list-page-shell .plist-detail__section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.product-list-page-shell .plist-detail__section-title { font-size: var(--font-size-base); line-height: 1.4; font-weight: var(--font-weight-heavy); color: var(--text-main); display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.product-list-page-shell .plist-detail__section-title svg { width: 14px; height: 14px; flex-shrink: 0; stroke: #94a3b8; }

.product-list-page-shell .plist-detail__photo-download-link { padding: 0; border: none; background: transparent; font-size: var(--font-size-xs); color: var(--text-subtle); text-decoration: underline; cursor: pointer; }
.product-list-page-shell .plist-detail__photo-download-link:hover { color: var(--text-main); }
.product-list-page-shell .plist-detail__photo-download-link:disabled { opacity: 0.4; cursor: default; }

.product-list-page-shell .plist-detail__card-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-2); }
.product-list-page-shell .plist-detail__card { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border: 0.5px solid rgba(0,0,0,0.08); background: var(--surface-base); border-radius: var(--radius-ui); }
.product-list-page-shell .plist-detail__card--flat { padding: var(--space-2) var(--space-3); }
.product-list-page-shell .plist-detail__card-title { font-size: var(--font-size-base); line-height: 1.4; font-weight: 600; color: var(--text-main); }
.product-list-page-shell .plist-detail__card-body { display: flex; flex-direction: column; gap: 2px; }

.product-list-page-shell .plist-detail__row { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: 2px 0; }
.product-list-page-shell .plist-detail__row--stack { display: grid; grid-template-columns: 100px minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: 2px 0; }
.product-list-page-shell .plist-detail__label { flex: 0 0 auto; font-size: var(--font-size-base); line-height: 1.4; color: var(--text-subtle); font-weight: 600; }
.product-list-page-shell .plist-detail__value,
.product-list-page-shell .plist-detail__link { min-width: 0; font-size: var(--font-size-base); line-height: 1.4; color: var(--text-main); text-align: right; word-break: break-word; }
.product-list-page-shell .plist-detail__value--multiline { text-align: right; }
.product-list-page-shell .plist-detail__chips { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-1); }
.product-list-page-shell .plist-detail__chip { display: inline-flex; align-items: center; min-height: 20px; padding: 0 var(--space-2); border: 1px solid var(--border-soft); background: var(--surface-subtle); font-size: var(--font-size-base); line-height: 1.4; color: var(--text-main); border-radius: var(--radius-ui); }
.product-list-page-shell .plist-detail__table-wrap { border: 1px solid var(--border-soft); overflow: hidden; border-radius: var(--radius-ui); container-type: inline-size; }
.product-list-page-shell .plist-detail__table th,
.product-list-page-shell .plist-detail__table td { font-size: var(--font-size-base); line-height: 1.5; }

@container (max-width: 300px) {
  .product-list-page-shell .plist-detail__table .price-cell .price-short { display: inline; }
  .product-list-page-shell .plist-detail__table .price-cell .price-full { display: none; }
}

.product-list-page-shell .plist-detail__row > .pls-detail__value,
.product-list-page-shell .plist-detail__row > .plist-detail__link,
.product-list-page-shell .plist-detail__row > .plist-detail__chips,
.product-list-page-shell .plist-detail__row > .plist-detail__value--multiline,
.product-list-page-shell .plist-detail__row > .plist-detail__viewer-button { justify-self: end; }

.product-list-page-shell .plist-detail__hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.product-list-page-shell .plist-detail__hero-badges { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-1); flex: 0 0 auto; }
.product-list-page-shell .plist-detail__hero-badges .badge-row { justify-content: flex-end; }
.product-list-page-shell .plist-detail__hero-subtitle,
.product-list-page-shell .plist-detail__hero-option { font-size: var(--font-size-base); line-height: 1.5; color: var(--text-main); word-break: break-word; }
.product-list-page-shell .plist-detail__table--vertical th,
.product-list-page-shell .plist-detail__table--vertical td { vertical-align: top; }
.product-list-page-shell .plist-detail__table--vertical th { width: 44%; text-align: left; color: var(--text-subtle); font-weight: 600; }
.product-list-page-shell .plist-detail__table--vertical td { text-align: left; color: var(--text-main); word-break: break-word; }

.product-list-page-shell .plist-detail__viewer-button { border: 0; padding: 0; background: transparent; font-size: var(--font-size-base); line-height: 1.5; color: var(--text-main); text-decoration: underline; cursor: pointer; }
.product-list-page-shell .plist-detail__photo-preview { display: block; width: 100%; border: 1px solid var(--border-soft); background: var(--surface-subtle); padding: 0; cursor: pointer; overflow: hidden; }
.product-list-page-shell .plist-detail__photo-preview img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.product-list-page-shell .plist-detail__media-empty { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--border-soft); background: var(--surface-subtle); font-size: var(--font-size-base); color: var(--text-subtle); border-radius: var(--radius-ui); }
.product-list-page-shell .plist-detail__link:hover { text-decoration: underline; }
.product-list-page-shell .plist-detail__price-summary { margin-top: 2px; padding: var(--space-2) var(--space-2); border: 1px solid var(--border-soft); background: var(--surface-subtle); border-radius: var(--radius-ui); }
.product-list-page-shell .plist-detail__price-note { font-size: var(--font-size-base); line-height: 1.6; color: var(--text-main); word-break: keep-all; }

.product-list-page-shell .plist-detail__photo-layout { display: flex; flex-direction: column; gap: var(--space-2); }
.product-list-page-shell .plist-detail__photo-main { display: block; width: 100%; padding: 0; border: 1px solid var(--border-soft); background: var(--surface-subtle); cursor: pointer; overflow: hidden; border-radius: var(--radius-ui); }
.product-list-page-shell .plist-detail__photo-main img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.product-list-page-shell .plist-detail__photo-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-2); }
.product-list-page-shell .plist-detail__thumb { display: block; width: 100%; padding: 0; border: 1px solid var(--border-soft); background: var(--surface-subtle); cursor: pointer; overflow: hidden; border-radius: var(--radius-ui); }
.product-list-page-shell .plist-detail__thumb.is-active { border-color: var(--border-strong); }
.product-list-page-shell .plist-detail__thumb img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ─── 이미지 뷰어 ────────────────────────────────────────────────────────── */

.plist-image-viewer-overlay { position: fixed; inset: 0; z-index: 1200; }
.plist-image-viewer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.88); }
.plist-image-viewer-dialog { position: relative; z-index: 1; width: min(1120px, calc(100vw - 48px)); height: min(88vh, 860px); margin: var(--space-6) auto; padding: 40px var(--space-6) var(--space-5); display: grid; grid-template-rows: auto 1fr auto; gap: var(--space-4); }
.plist-image-viewer-close { position: absolute; top: 0; right: 0; width: 40px; height: 40px; border: 0; background: transparent; color: #fff; font-size: var(--font-size-3xl); cursor: pointer; }
.plist-image-viewer-count { display: flex; justify-content: center; color: #fff; font-size: var(--font-size-lg); font-weight: 600; }
.plist-image-viewer-main-wrap { display: grid; grid-template-columns: 56px 1fr 56px; gap: var(--space-4); min-height: 0; align-items: center; }
.plist-image-viewer-main { min-width: 0; min-height: 0; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.plist-image-viewer-main img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-ui); background: #111827; }
.plist-image-viewer-nav { width: 48px; height: 48px; border: 0; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.9); color: #111827; font-size: var(--font-size-3xl); line-height: 1; cursor: pointer; }
.plist-image-viewer-nav:disabled { opacity: 0.3; cursor: default; }

/* ─── 반응형 ──────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .pls-detail-panel { position: fixed; inset: 0; z-index: 100; width: 100%; border-radius: 0; box-shadow: none; }
  .plist-image-viewer-dialog { width: calc(100vw - 20px); height: calc(100vh - 20px); margin: 10px auto; padding: 36px var(--space-3) var(--space-4); }
  .plist-image-viewer-main-wrap { grid-template-columns: 40px 1fr 40px; gap: var(--space-2); }
  .plist-image-viewer-nav { width: 36px; height: 36px; font-size: 24px; }
}