/* bpkpcb — 페이지 섹션 스타일. 토큰·헤더·푸터·폼 기본은 site.css */

/* 상태 배지 — 개발 단계·맞춤 제작 표기 (설계 문서 §3 정직성 규칙) */
/* 왼쪽 컬러 바 + 본문 폰트 — 개발 중 = 시안, 맞춤 제작 = 네이비. .section p(색·여백)보다 우선하도록 .section 한정 */
.section .badge { display: block; margin: 0 0 12px; padding: 2px 0 2px 12px; border-left: 3px solid var(--cyan); font: 600 14px/1.4 var(--font-sans); color: var(--cyan); }
.section .badge-muted { border-left-color: var(--navy); color: var(--navy); }

/* 제품 블록 — 이미지 + 설명 2단 */
.product { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.product-media img, .figure img { display: block; width: 100%; height: auto; background: var(--paper); }
.product-media .thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.figure { margin: 0; }
.figure figcaption { margin-top: 8px; font-size: 13px; color: var(--slate); }
.checklist { margin: 0 0 16px; padding-left: 20px; color: #2B3548; }
.checklist li { margin-bottom: 6px; }

/* 목표 사양표 */
.spec { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 15px; }
.spec caption { text-align: left; font: 600 16px/1.4 var(--font-sans); padding-bottom: 6px; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: 12px 0; border-bottom: 1px solid var(--line); }
.spec th { width: 38%; padding-right: 16px; font: 500 12px/1.6 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); }
.spec-note { font-size: 13px; color: var(--slate); margin-top: 10px; }

/* 카드 그리드 — 주변장비·모듈·팀·파트너 공용 */
.grid-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.grid-cards > li { border: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.grid-cards img { display: block; width: 100%; height: 180px; object-fit: contain; background: var(--paper); margin-bottom: 4px; }
.grid-cards b { font-weight: 600; font-size: 17px; }
.grid-cards span { color: var(--slate); font-size: 15px; }
.grid-cards .years { font: 700 28px/1 var(--font-sans); color: var(--cyan); }
/* 파트너 로고 — 각 파트너 공식 사이트 원본(자체 호스팅). 흰색 단색 로고(So-High)는 어두운 칸 */
.grid-cards img.partner-logo { height: 96px; padding: 18px 24px; box-sizing: border-box; }
.grid-cards img.partner-logo-dark { background: var(--navy); }

/* SMT 라인 흐름 — BPK 공급 범위(data-bpk) 강조. 폰에서는 2열로 접힌다 */
.line-flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin: 28px 0 12px; padding: 0; list-style: none; counter-reset: step; }
.line-flow li { padding: 14px 10px; border: 1px solid var(--line); background: var(--white); font-size: 14px; font-weight: 600; text-align: center; }
.line-flow li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font: 500 11px/1.4 var(--font-mono); color: var(--slate); margin-bottom: 4px; }
.line-flow li[data-bpk] { border-color: var(--cyan); background: #E8F6FC; }
.line-legend { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--slate); margin: 0; }
.line-legend::before { content: ''; flex: none; width: 14px; height: 14px; border: 1px solid var(--cyan); background: #E8F6FC; }

/* 숫자 띠 */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.stats li { padding: 24px 20px 24px 0; border-bottom: 1px solid var(--line); }
.stats b { display: block; font: 700 36px/1.1 var(--font-sans); margin-bottom: 6px; }
.stats span { font-size: 14px; color: var(--slate); }

/* 기술 — 구현 완료 / 개발 중 분리 블록 */
.status-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
.status-block { padding: 24px; border: 1px solid var(--line); }
.status-block[data-status="available"] { border-top: 3px solid var(--cyan); }
.status-block[data-status="development"] { border-top: 3px dashed var(--slate); background: var(--paper); }
.status-block h3 { font-size: 17px; margin: 0 0 12px; }
.status-block ul { margin: 0; padding-left: 20px; color: #2B3548; }
.status-block li { margin-bottom: 6px; }
.figures-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 24px; }
#line .figures-2 img { max-width: 280px; }

/* 마감 CTA */
.cta-band { background: var(--navy); color: var(--white); padding: 56px 0; }
.cta-band h2 { font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
.cta-band p { color: #D5DCE8; margin: 0 0 24px; max-width: 40em; }

/* 문의 폼 — select·동의 체크박스 (input·textarea 기본은 site.css) */
.field select { font: 16px/1.4 var(--font-sans); color: var(--navy); padding: 12px 14px; border: 1px solid #B8C0CC; border-radius: 2px; background: var(--white); }
.field select:focus { outline: 2px solid var(--cyan); outline-offset: 0; border-color: var(--cyan); }
.consent { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #2B3548; }
.consent input { flex: none; margin-top: 3px; width: 18px; height: 18px; }
.direct .india { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; }

@media (max-width: 959px) {
  .product, .status-split, .figures-2 { grid-template-columns: 1fr; gap: 24px; }
  .grid-cards { grid-template-columns: 1fr; }
  .line-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spec th { width: 42%; }
}