/* 물질 상세(product_detail.jsx · product_chem_header.jsx · product_<탭>.jsx) 스타일 — 예전 인라인 style 을 옮긴 것.
   색·글꼴은 tokens.css 변수만, 간격은 --unit(4px) 배수. app.css 의 .panel .row .v 처럼 깊은 규칙보다 이겨야 하는 곳은
   같은 문맥을 붙여 우선순위를 맞춘다(인라인 style 일 때와 같은 결과). */

/* ── 공용 조각 ── */
.pd-stack { margin-top: calc(var(--unit) * 4); }
.pd-note { font-size: 12px; }
.pd-meta { font-size: 11px; }
.pd-error-note { color: var(--hazard); font-size: 12px; }
.pd-warn-text { color: var(--warn-ink); font-size: 12px; }
.pd-hazard-text { color: var(--hazard); }
.pd-inline { display: flex; gap: calc(var(--unit) * 2); align-items: center; }
.pd-tab-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: calc(var(--unit) * 2.5); }
.pd-tab-head.center { align-items: center; }
.pd-tab-title { font-family: var(--font-display); font-size: 18px; margin: 0; letter-spacing: -0.01em; }
.pd-tab-title-sm { font-family: var(--font-display); font-size: 16px; margin: 0; }
.panel .body.pd-flush { padding: 0; }
.panel .row.pd-row-top { align-items: flex-start; }
.panel .row .v.pd-v-sm { font-size: 12px; }
.panel .row .v.pd-v-xs { font-size: 11px; }
.panel .row .k.pd-k-xs { font-size: 11px; }
.pd-chip-row { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 1.25); margin-top: calc(var(--unit) * 2); }
.pd-chip-row-sm { margin-top: var(--unit); display: flex; flex-wrap: wrap; gap: var(--unit); }
.chip.pd-chip-xs { font-size: 9px; }
.chip.pd-chip-tag { font-size: 9px; margin-top: var(--unit); display: inline-block; }

/* ── 물질 머리(ChemHeader)·빈 화면 ── */
.card.pd-empty-card { padding: calc(var(--unit) * 10); text-align: center; color: var(--fg-muted); }
.pd-empty-icon { color: var(--fg-subtle); }
.pd-empty-title { margin-top: calc(var(--unit) * 3); font-family: var(--font-display); }
.pd-empty-hint { font-size: 13px; }
.chem-hdr h1 .pd-name-en { font-weight: 400; }
.pd-msds-count { font-family: var(--font-mono); font-size: 13px; }
.pd-hazard-chips { display: flex; gap: calc(var(--unit) * 1.5); margin-top: calc(var(--unit) * 3); flex-wrap: wrap; }
.chem-hdr .stats-mini .pd-stat-unit { font-size: 14px; color: var(--fg-muted); }
.chem-hdr .stats-mini .pd-stat-sub { font-size: 11px; }
.chem-hdr .stats-mini .v.pd-stat-sm { font-size: 16px; }
.chem-hdr .stats-mini .v.tone-hazard { color: var(--hazard); }
.chem-hdr .stats-mini .v.tone-warn { color: var(--warn); }
.chem-hdr .stats-mini .v.tone-safe { color: var(--safe); }

/* ── MSDS 탭 ── */
.msds-grid .msds-item.is-open { background: var(--accent-soft); }
.pd-section-panel { margin-top: calc(var(--unit) * 5); }
.pd-empty-line { font-size: 13px; padding: calc(var(--unit) * 2) 0; }
.pd-flag-row { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 1.25); margin-bottom: calc(var(--unit) * 2.5); }
.pd-flag { font-size: 11px; font-weight: 650; padding: calc(var(--unit) * 0.5) calc(var(--unit) * 2); border-radius: 11px; border: 1px solid; }
.pd-flag.bad { background: var(--hazard-soft); color: var(--hazard); border-color: var(--hazard); }
.pd-flag.warn { background: var(--warn-soft); color: var(--warn-ink); border-color: var(--warn); }
.pd-flag.info { background: var(--info-soft); color: var(--info-ink); border-color: var(--info); }
.pd-reg-item { padding: calc(var(--unit) * 0.25) 0; }

/* ── 특허 탭 ── */
.pat-table td.pd-table-empty { text-align: center; color: var(--fg-muted); padding: calc(var(--unit) * 6); }
.pat-table .title-cell .pd-abstract { display: block; margin-top: var(--unit); line-height: 1.4; }
.pat-table td.pd-td-sm { font-size: 12px; }
/* 막대 수(--cols)·높이(--h)·진하기(--o)·너비(--w)는 자료에서 나오므로 그 값만 style 의 CSS 변수로 넘긴다 */
.pd-bars { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: var(--unit); align-items: end; height: calc(var(--unit) * 25); }
.pd-bar { height: var(--h); background: var(--accent); opacity: var(--o); border-radius: var(--r-1) var(--r-1) 0 0; }
.pd-bars-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--fg-subtle); margin-top: calc(var(--unit) * 1.5); }
.pd-series-name { font-size: 12px; margin-bottom: var(--unit); }
.pd-track { height: calc(var(--unit) * 0.75); background: var(--bg-sunken); border-radius: var(--r-1); overflow: hidden; }
.pd-track-fill { height: 100%; width: var(--w); background: var(--accent); }
.pd-series-val { font-size: 12px; }

/* ── 시장·뉴스 탭 ── */
.pd-flush-empty { padding: calc(var(--unit) * 4) calc(var(--unit) * 4.5); color: var(--fg-muted); font-size: 13px; }
.pd-news-row { display: grid; grid-template-columns: calc(var(--unit) * 18) 1fr auto; gap: calc(var(--unit) * 4); padding: calc(var(--unit) * 3.5) calc(var(--unit) * 4.5); align-items: center; }
.pd-news-row + .pd-news-row { border-top: 1px solid var(--border); }
.pd-news-title { font-size: 13px; }
.pd-news-sum { font-size: 11px; margin-top: calc(var(--unit) * 0.5); }

/* ── 안전 가이드 탭 ── */
.guide-row.pd-guide-empty { color: var(--fg-muted); justify-content: center; }
.pd-guide-title { font-size: 14px; }
.pd-guide-warn { font-size: 10px; color: var(--warn); margin-top: calc(var(--unit) * 0.5); font-family: var(--font-mono); letter-spacing: .06em; }
.pd-guide-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--unit); }
.chip.pd-tier { font-size: 9px; }
.chip.pd-tier.strong { color: var(--safe); border-color: var(--safe); }
.chip.pd-tier.moderate { color: var(--fg-muted); border-color: var(--fg-muted); }
.chip.pd-tier.generic { color: var(--warn); border-color: var(--warn); }

/* ── AI 요약 탭 ── */
.pd-ai-icon { color: var(--accent); }
.pd-ai-kicker { font-family: var(--font-mono); font-size: 11px; color: var(--accent-ink); letter-spacing: .08em; }
.ai-card p.pd-ai-error { color: var(--hazard); }
.pd-ai-text { font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; color: var(--fg); }
.pd-ai-src-title { font-size: 12px; }
.pd-ai-note { font-size: 12px; line-height: 1.5; }

/* ── 해외 규제 탭 ── */
.pd-retry-row { display: flex; align-items: center; gap: calc(var(--unit) * 2.5); flex-wrap: wrap; }
.pd-reach-row { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 1.5); }
.pd-reach { font-size: 11px; font-weight: 650; padding: calc(var(--unit) * 0.75) calc(var(--unit) * 2.5); border-radius: 11px; border: 1px solid var(--warn); color: var(--warn-ink); background: var(--warn-soft); }
.pd-reach.registered { border-color: var(--safe); color: var(--safe); background: var(--safe-soft); }
.pd-list-item { padding: calc(var(--unit) * 1.5) 0; }
.pd-list-item + .pd-list-item { border-top: 1px solid var(--border); }
.pd-item-title { font-size: 13px; }
.pd-item-line { font-size: 12px; margin-top: calc(var(--unit) * 0.5); }
.pd-item-sub { font-size: 11px; margin-top: calc(var(--unit) * 0.5); }
.pd-flush-empty-sm { padding: calc(var(--unit) * 3) calc(var(--unit) * 4); }
.pd-kotra-item { padding: calc(var(--unit) * 2.5) calc(var(--unit) * 4); }
.pd-kotra-item + .pd-kotra-item { border-top: 1px solid var(--border); }
.pd-kotra-link { font-size: 12px; font-weight: 600; color: var(--accent-ink); }

/* ── 아래 패널 공용(국가별 규제·사고 사례·EPA 집행·취급 사업장) ── */
.pd-lower { margin-top: calc(var(--unit) * 7); }
.card.pd-lower-empty { padding: calc(var(--unit) * 5); color: var(--fg-muted); font-size: 13px; }
.chem-hdr.pd-lower-stats { margin-bottom: calc(var(--unit) * 3.5); }
.chem-hdr .stats-mini.pd-full { width: 100%; }
.layout-2col.pd-align-start { align-items: start; }
.panel.pd-sub-panel { margin-top: calc(var(--unit) * 3.5); }
.panel .body.pd-scroll { max-height: calc(var(--unit) * 140); overflow-y: auto; }
.pd-link-xs { font-size: 10px; }
.pd-foot-note { font-size: 11px; margin-top: calc(var(--unit) * 2.5); }

/* ── 국가별 규제(product_intl.jsx) ── */
.pd-map-svg { width: 100%; height: auto; display: block; }
.pd-map-path { cursor: default; transition: fill 120ms; }
.pd-map-path.on { cursor: pointer; }
.card.pd-map-card { padding: calc(var(--unit) * 3); }
.pd-map-error { font-size: 12px; padding: calc(var(--unit) * 3); }
.pd-jur-row { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 1.5); margin-top: calc(var(--unit) * 2.5); }
.chip.pd-jur { cursor: pointer; font-size: 11px; font-weight: 500; }
.chip.pd-jur.on { font-weight: 700; background: var(--accent-soft); border-color: var(--accent); }
.pd-map-hint { font-size: 11px; margin-top: calc(var(--unit) * 2); }
.pd-reg-group { font-size: 12px; padding: calc(var(--unit) * 2.5) 0; overflow-wrap: anywhere; }
.pd-reg-group + .pd-reg-group { border-top: 1px dashed var(--border); }
.pd-reg-group-head { display: flex; justify-content: space-between; gap: calc(var(--unit) * 2); }
.pd-reg-entry { margin-top: calc(var(--unit) * 0.75); }
.pd-reg-group-foot { font-size: 10px; margin-top: calc(var(--unit) * 0.75); }

/* ── 근거 조문(product_provisions.jsx) ── */
.pd-prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 70), 1fr)); gap: calc(var(--unit) * 3); }
.pd-prov-hit { font-size: 12px; overflow-wrap: anywhere; min-width: 0; }
.pd-prov-snippet { margin-top: var(--unit); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* ── 임계량 비교(product_thresholds.jsx) — 위치·너비(--l, --w)는 자료에서 나오므로 style 의 CSS 변수로 ── */
.panel .body.pd-thr-body { padding-top: var(--unit); }
.pd-thr-kind { padding: calc(var(--unit) * 2.5) 0; border-top: 1px dashed var(--border); }
.pd-thr-head { display: flex; justify-content: space-between; gap: calc(var(--unit) * 2); font-size: 12px; margin-bottom: calc(var(--unit) * 1.5); }
.pd-thr-track { position: relative; height: calc(var(--unit) * 2.5); background: transparent; border-radius: 5px; }
.pd-thr-track.compare { background: var(--bg-sunken); }
.pd-thr-range { position: absolute; left: var(--l); width: var(--w); top: calc(var(--unit) * 0.75); height: var(--unit); background: color-mix(in srgb, var(--accent) 35%, transparent); }
.pd-thr-fill { width: var(--w); height: 100%; border-radius: 5px; background: color-mix(in srgb, var(--accent) 45%, var(--bg-sunken)); }
.pd-thr-fill.strictest { background: var(--accent); }
.pd-thr-val { text-align: right; font-weight: 500; }
.pd-thr-val.strong { font-weight: 700; }
.pd-thr-note { font-size: 11px; margin-top: calc(var(--unit) * 2); }

/* ── 사고 사례(product_incidents.jsx)·EPA 집행(product_enforcement.jsx) ── */
.pd-between { display: flex; justify-content: space-between; gap: calc(var(--unit) * 2); }
.card.pd-disc-card { padding: calc(var(--unit) * 3); font-size: 12px; min-width: 0; }
.pd-mini { font-size: 10px; margin-top: calc(var(--unit) * 0.5); }
.pd-tag-row { display: flex; flex-wrap: wrap; gap: var(--unit); margin-top: calc(var(--unit) * 1.5); }
.chip.pd-chip-10 { font-size: 10px; }
.pd-link-row { display: flex; flex-wrap: wrap; gap: calc(var(--unit) * 2.5); margin-top: calc(var(--unit) * 2); }
.pd-link-11 { font-size: 11px; }
.pd-disc-intro { font-size: 12px; margin-bottom: calc(var(--unit) * 2); }
.pd-disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--unit) * 55), 1fr)); gap: calc(var(--unit) * 2.5); margin-bottom: calc(var(--unit) * 3.5); }
.pd-case { font-size: 12px; padding: calc(var(--unit) * 3) 0; overflow-wrap: anywhere; }
.pd-case.tight { padding: calc(var(--unit) * 2.5) 0; }
.pd-case + .pd-case { border-top: 1px dashed var(--border); }
.pd-src-tag { font-size: 10px; white-space: nowrap; }
.pd-case-summary { margin-top: calc(var(--unit) * 1.5); line-height: 1.55; }
.pd-case-line { margin-top: var(--unit); }
.pd-case-desc { margin-top: var(--unit); line-height: 1.5; }
.pd-case-foot { font-size: 10px; margin-top: var(--unit); }
.pd-penalty { font-weight: 700; white-space: nowrap; }
.panel .body.pd-case-list { max-height: calc(var(--unit) * 140); overflow-y: auto; padding-top: var(--unit); }
.panel .body.pd-case-list.tall { max-height: calc(var(--unit) * 155); }
.pd-toggle-row { display: flex; gap: calc(var(--unit) * 1.5); }
.chip.pd-toggle { cursor: pointer; font-size: 11px; font-weight: 500; }
.chip.pd-toggle.on { font-weight: 700; background: var(--accent-soft); }
.pd-foot-note-sm { font-size: 11px; margin-top: calc(var(--unit) * 1.5); }

/* ── 취급 사업장(product_handlers.jsx) — 합계 막대 너비(--w)는 자료 값 ── */
.pat-table th.pd-th-num { width: calc(var(--unit) * 11); }
.pat-table th.pd-num, .pat-table td.pd-num { text-align: right; }
.pd-total { font-size: 12px; font-weight: 600; }
.pd-total-bar { height: calc(var(--unit) * 0.75); border-radius: var(--r-1); margin-top: calc(var(--unit) * 0.75); background: var(--accent); opacity: 0.75; width: var(--w); margin-left: auto; }
.pd-more-row { margin-top: calc(var(--unit) * 2.5); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: calc(var(--unit) * 2); }
.layout-2col.pd-side-panels { margin-top: calc(var(--unit) * 4.5); }
.panel .row .v .pd-plain { font-weight: 400; }

/* ── 네이버 검색결과(naver_results.jsx)·KIPRIS 링크 전용(kipris_link_only.jsx) ── */
.naver-row { display: grid; grid-template-columns: 1fr auto; gap: calc(var(--unit) * 4); padding: calc(var(--unit) * 3.5) calc(var(--unit) * 4.5); align-items: start; }
.naver-row + .naver-row { border-top: 1px solid var(--border); }
.naver-title { font-size: 13px; font-weight: 600; color: inherit; }
.naver-links { font-size: 10px; margin-top: var(--unit); display: flex; gap: calc(var(--unit) * 2.5); }
.naver-date { font-size: 11px; white-space: nowrap; }
.naver-results .ui-hint.naver-attr { padding: calc(var(--unit) * 2.5) calc(var(--unit) * 4.5) 0; }
.kipris-body { font-size: 13px; margin: 0 0 calc(var(--unit) * 3); }
.ui-hint.kipris-note { margin-top: calc(var(--unit) * 3); }