/* Product detail component styles (shared by Explorer + preview harness). */

.pd-root { display: block; }
.pd-header { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4); margin-bottom: var(--sp-3); }
/* edit 모드 헤더는 form-only 라 패딩 더 줄임 */
.pd-header-edit { padding: var(--sp-3); }
.pd-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.pd-header-info { min-width: 0; flex: 1; }
.pd-header-edit-btn { flex-shrink: 0; padding: 6px 12px; background: var(--c-primary); color: #fff; border: 1px solid var(--c-primary); border-radius: var(--r-sm); font-size: var(--fs-sm); cursor: pointer; white-space: nowrap; }
.pd-header-edit-btn:hover { background: var(--c-primary-hover); }
.pd-title { font-size: var(--fs-2xl, 26px); font-weight: var(--fw-bold); margin: 0 0 var(--sp-2); }
.pd-badges { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.pd-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 12px; font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.pd-badge-mfr { background: var(--c-info-bg); color: var(--c-info-text); border: 1px solid var(--c-info-border); }
.pd-badge-cat { background: var(--c-warning-bg); color: var(--c-warning-text); border: 1px solid var(--c-warning-border); }
.pd-badge-type { background: var(--c-border-light); color: var(--c-text-muted); }
.pd-id { font-size: var(--fs-xs); color: var(--c-text-muted); margin-left: var(--sp-2); }

.pd-body { display: grid; gap: var(--sp-4); }
.pd-panel { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5); }
.pd-panel h3 { font-size: var(--fs-sm); margin: 0 0 var(--sp-3); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.05em; display: flex; align-items: center; gap: var(--sp-2); }
.pd-count { background: var(--c-border-light); padding: 1px 8px; border-radius: 10px; font-size: var(--fs-xs); color: var(--c-text); font-weight: var(--fw-semibold); text-transform: none; letter-spacing: 0; }
.pd-empty { color: var(--c-text-muted); font-size: var(--fs-sm); }

.pd-aliases { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pd-alias { background: var(--c-info-bg); color: var(--c-info-text); border: 1px solid var(--c-info-border); padding: 3px 10px; border-radius: 12px; font-size: var(--fs-xs); }

.pd-specs { background: var(--c-bg); border: 1px solid var(--c-border-light); border-radius: var(--r-sm); padding: var(--sp-3); font-family: "SF Mono", Menlo, monospace; font-size: var(--fs-xs); color: var(--c-text); white-space: pre-wrap; margin: 0; max-height: 320px; overflow-y: auto; }

.pd-notfound { padding: var(--sp-5); text-align: center; color: var(--c-text-muted); background: var(--c-surface); border: 1px dashed var(--c-border); border-radius: var(--r-md); }

/* Stats */
.pd-stats-panel { padding: var(--sp-4); }
.pd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.pd-stat { background: var(--c-surface-alt); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); border: 1px solid var(--c-border-light); }
.pd-stat-label { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pd-stat-val { font-size: var(--fs-xl, 22px); font-weight: var(--fw-bold); color: var(--c-primary); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pd-stat-sub { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 2px; }

/* Chart */
.pd-chart-wrap { background: var(--c-surface); border: 1px solid var(--c-border-light); border-radius: var(--r-sm); padding: var(--sp-3); margin-bottom: var(--sp-4); height: 240px; position: relative; }
.pd-chart { width: 100% !important; height: 100% !important; }

/* History table */
table.pd-history { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.pd-history thead th { background: var(--c-surface-alt); text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border); font-weight: var(--fw-semibold); color: var(--c-text-muted); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; position: sticky; top: 0; z-index: 2; }
table.pd-history th.pd-num, table.pd-history td.pd-num { text-align: right; font-variant-numeric: tabular-nums; }
table.pd-history td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--c-border-light); }
table.pd-history tr:hover td { background: var(--c-surface-alt); }
table.pd-history .pd-mono { font-family: "SF Mono", Menlo, monospace; font-size: var(--fs-xs); color: var(--c-text-muted); }
.pd-quote-link { color: var(--c-primary); text-decoration: none; font-family: "SF Mono", Menlo, monospace; font-size: var(--fs-xs); }
.pd-quote-link:hover { text-decoration: underline; }
.pd-native { color: var(--c-text-muted); font-size: var(--fs-xs); }
.pd-origin { display: inline-block; margin-left: 4px; font-size: 10px; color: #16a34a; font-weight: var(--fw-semibold); }
.pd-tag { display: inline-block; padding: 1px 6px; border-radius: 10px; font-size: 11px; font-weight: var(--fw-semibold); }
.pd-tag-min { background: var(--c-success-bg); color: var(--c-success-text); }
.pd-tag-max { background: var(--c-danger-bg); color: var(--c-danger-text); }
.pd-note-sub { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: none; letter-spacing: 0; font-weight: var(--fw-medium); }

/* Changelog timeline */
.pd-timeline { border-left: 2px solid var(--c-border); padding-left: var(--sp-4); }
.pd-tl-item { position: relative; padding: var(--sp-2) 0; font-size: var(--fs-sm); }
.pd-tl-item::before { content: ''; position: absolute; left: calc(-1 * var(--sp-4) - 5px); top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }
.pd-tl-ts { font-size: var(--fs-xs); color: var(--c-text-muted); }
.pd-tl-body { color: var(--c-text); line-height: 1.5; }
.pd-tl-change { color: var(--c-text); }
.pd-tl-field { font-family: "SF Mono", Menlo, monospace; background: var(--c-surface-alt); padding: 1px 5px; border-radius: 3px; font-size: var(--fs-xs); }

@media (max-width: 768px) {
  .pd-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Edit mode */
.pd-header-edit { display: grid; gap: var(--sp-3); }
.pd-edit-row { display: flex; flex-direction: column; gap: 4px; }
.pd-edit-label { font-size: var(--fs-xs); color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pd-edit-input { padding: 6px 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); font-size: var(--fs-sm); font-family: inherit; background: var(--c-bg); color: var(--c-text); }
.pd-edit-input:focus { outline: none; border-color: var(--c-primary); box-shadow: var(--focus-ring); }
.pd-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--sp-3);
}
.pd-edit-readonly { padding: 6px 10px; background: var(--c-surface-alt); border-radius: var(--r-sm); font-family: "SF Mono", Menlo, monospace; font-size: var(--fs-xs); color: var(--c-text-muted); }
.pd-edit-specs { width: 100%; min-height: 160px; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-sm); font-family: "SF Mono", Menlo, monospace; font-size: var(--fs-xs); background: var(--c-bg); color: var(--c-text); resize: vertical; }
.pd-edit-error { color: var(--c-danger); font-size: var(--fs-xs); margin-top: 4px; min-height: 18px; }
.pd-edit-actions { display: flex; gap: var(--sp-2); align-items: center; padding: 0 var(--sp-5) var(--sp-3); }
.pd-edit-status { font-size: var(--fs-xs); color: var(--c-text-muted); margin-left: var(--sp-2); }
.pd-btn { padding: 6px 14px; border: 1px solid var(--c-border); background: var(--c-surface); color: var(--c-text); border-radius: var(--r-sm); font-size: var(--fs-sm); cursor: pointer; }
.pd-btn:hover:not(:disabled) { background: var(--c-surface-alt); }
.pd-btn:disabled { opacity: var(--disabled-opacity); cursor: not-allowed; }
.pd-btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.pd-btn-primary:hover:not(:disabled) { background: var(--c-primary-hover); }
.pd-btn-warn { color: var(--c-warning-text); border-color: var(--c-warning-border); background: var(--c-warning-bg); }
.pd-btn-warn:hover:not(:disabled) { background: var(--c-surface-alt); }
.pd-btn-danger { color: var(--c-danger-text); border-color: var(--c-danger-border); background: var(--c-danger-bg); }
.pd-btn-danger:hover:not(:disabled) { background: var(--c-surface-alt); }

.pd-danger-zone { border-color: var(--c-danger-border); }
.pd-danger-zone h3 { color: var(--c-danger); }
.pd-danger-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* PR C: 상태 배지 (view 헤더) */
.pd-badge-status { background: var(--c-border-light); color: var(--c-text); }
.pd-badge-status-discontinued { background: var(--c-danger-bg); color: var(--c-danger-text); border: 1px solid var(--c-danger-border); }
.pd-badge-status-unknown { background: var(--c-warning-bg); color: var(--c-warning-text); border: 1px solid var(--c-warning-border); }

/* PR C: 추가 정보 (view) */
.pd-extra-notes { white-space: pre-wrap; font-size: var(--fs-sm); color: var(--c-text); margin-bottom: var(--sp-2); }
.pd-extra-url a { color: var(--c-primary); font-size: var(--fs-sm); word-break: break-all; }

/* PR C: edit notes textarea */
.pd-edit-notes { width: 100%; min-height: 100px; font-family: inherit; resize: vertical; padding: 8px 10px; }

/* Pick-or-create (제품명 / 제조사) — 좁은 pane 안정 layout */
.pd-pickcreate-existing, .pd-pickcreate-new {
  display: flex; gap: var(--sp-2); align-items: stretch; flex-wrap: nowrap; min-width: 0;
}
.pd-pickcreate-existing > select,
.pd-pickcreate-new > input {
  flex: 1; min-width: 0; max-width: 100%;
}
/* 작은 icon 버튼 — 텍스트 라벨 대신 + / ← icon 으로 좌측 공간 확보 */
.pd-pickcreate-toggle {
  flex-shrink: 0; padding: 6px 10px; font-size: var(--fs-sm);
  white-space: nowrap; min-width: 32px;
}
/* 일반 edit input — 좁은 모달에서 overflow 방지 */
.pd-edit-input { max-width: 100%; min-width: 0; }

/* Edit aliases (수동 추가/삭제) */
.pd-edit-hint { text-transform: none; letter-spacing: 0; font-weight: var(--fw-medium); color: var(--c-text-muted); margin-left: var(--sp-2); }
.pd-alias-editable { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.pd-alias-x { background: none; border: none; color: var(--c-danger); cursor: pointer; padding: 0 2px; font-size: 14px; line-height: 1; }
.pd-alias-x:hover { color: var(--c-danger-hover); }
.pd-alias-add-row { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-3); }
.pd-alias-add-input { flex: 1; }