/* 물질 검색 화면(product_search*.jsx, .ps-*) — 예전 인라인 style 을 옮긴 것.
   색·글꼴은 tokens.css 변수만, 간격은 --unit(4px) 배수. */

.ps-hero { max-width: calc(var(--unit) * 180); margin: calc(var(--unit) * 15) auto calc(var(--unit) * 7); text-align: center; }
.ps-hero h1.ps-title { font-size: 48px; letter-spacing: -0.035em; margin-bottom: calc(var(--unit) * 3); }
.ps-sub { font-size: 16px; margin-bottom: calc(var(--unit) * 7); }
.ps-box { display: grid; grid-template-columns: auto 1fr auto; gap: calc(var(--unit) * 2); align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: var(--unit) var(--unit) var(--unit) calc(var(--unit) * 3.5); background: var(--bg-elevated); box-shadow: var(--shadow-2); }
.ps-box-icon { color: var(--fg-subtle); }
.ps-box input.ps-input { border: 0; outline: 0; background: transparent; font-size: 16px; padding: calc(var(--unit) * 3) 0; }
.ps-try { display: flex; justify-content: center; gap: calc(var(--unit) * 2); margin-top: calc(var(--unit) * 3.5); flex-wrap: wrap; }
.ps-try.ps-open { align-items: center; margin-top: calc(var(--unit) * 2.5); }
.ps-try-label { font-size: 12px; margin-right: var(--unit); }
.chip.ps-pick { cursor: pointer; }
.ps-try .btn.ps-featured { border-color: var(--accent); color: var(--accent-ink); }

.ps-results { max-width: calc(var(--unit) * 230); margin: 0 auto; }
.ps-loading { font-size: 12px; margin-left: calc(var(--unit) * 2.5); }
.ps-filter { display: flex; gap: calc(var(--unit) * 1.5); margin-bottom: calc(var(--unit) * 3); align-items: center; }
.upper.ps-filter-label { color: var(--fg-muted); margin-right: var(--unit); }
.seg.ps-seg { height: calc(var(--unit) * 7); }
.ps-sort-note { font-size: 11px; margin-left: auto; }
.card.ps-none { padding: calc(var(--unit) * 6); text-align: center; color: var(--fg-muted); }
.ps-table-wrap { overflow-x: auto; }
.pat-table.ps-table { table-layout: fixed; min-width: calc(var(--unit) * 180); }
.ps-col-name { width: 38%; }
.ps-col-en { width: 22%; }
.ps-col-cas { width: 13%; }
.ps-col-id { width: 10%; }
.ps-col-src { width: 11%; }
.ps-col-open { width: 6%; }
.pat-table td.ps-group { background: var(--bg-sunken); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-muted); padding: calc(var(--unit) * 2) calc(var(--unit) * 3.5); }
.pat-table tr.ps-row { cursor: pointer; }
.pat-table td.ps-wrap { overflow-wrap: anywhere; }
.pat-table td.ps-nowrap { white-space: nowrap; }
.pat-table td.ps-td-xs { font-size: 11px; }

.ps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--unit) * 3); margin-top: calc(var(--unit) * 10); }
.card.ps-card { padding: calc(var(--unit) * 5); }
.ps-card-icon { color: var(--accent); }
.ps-card h4.ps-card-title { margin: calc(var(--unit) * 2.5) 0 var(--unit); font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; }
.ps-card-key { font-size: 12px; margin-bottom: calc(var(--unit) * 2); }
.ps-card p.ps-card-desc { font-size: 13px; margin: 0; line-height: 1.5; }