/* pg125 품질관리 — 공정 흐름 2단 + 비대칭 사진 그리드.
   색·타이포·머리말은 jungshin.css를 따르고 이 파일은 배치만 담당한다. */

/* ── 상단 대표 사진 ───────────────────────── */
.qm-hero{margin:0 0 76px}
.qm-hero img{
  display:block;width:100%;aspect-ratio:16/6;object-fit:cover;
  background:var(--jn-bg);border:1px dashed #cfd9e6;border-radius:4px;
}
.qm-hero figcaption{
  margin:12px 0 0;font-size:13px;color:var(--jn-muted);
  font-family:'IBM Plex Mono','Consolas',monospace;letter-spacing:.04em;
}

/* ── 공정별 검사 단계 — 좌 고정 / 우 목록 ──── */
.qm-flow{display:grid;grid-template-columns:320px 1fr;gap:60px;align-items:start}
.qm-flow-aside{position:sticky;top:96px}
.qm-flow-desc{margin:0;font-size:15px;line-height:1.8;color:var(--jn-muted)}

.qm-steps{list-style:none;margin:0;padding:0;border-top:2px solid var(--jn-primary)}
.qm-step{display:grid;grid-template-columns:66px 1fr;gap:22px;padding:24px 4px;border-bottom:1px solid var(--jn-line)}
.qm-no{
  font-family:'IBM Plex Mono','Consolas',monospace;font-size:22px;font-weight:600;
  color:var(--jn-primary);opacity:.55;line-height:1.4;
}
.qm-step-title{font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--jn-ink);margin:0 0 6px}
.qm-step-note{margin:0;font-size:15px;line-height:1.7;color:var(--jn-body)}
.qm-tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 0;padding:0}
.qm-tags li{
  font-family:'IBM Plex Mono','Consolas',monospace;font-size:12.5px;font-weight:600;letter-spacing:.03em;
  color:var(--jn-primary);background:var(--t1);border-radius:999px;padding:5px 13px;
}

/* ── 사진 자리 공통 ───────────────────────── */
.qm-fig{margin:0}
.qm-fig img{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--jn-bg);border:1px dashed #cfd9e6;border-radius:4px;
}
.qm-fig figcaption{display:flex;flex-direction:column;gap:3px;margin:13px 0 0}
.qm-fig figcaption strong{font-size:16px;font-weight:700;color:var(--jn-ink)}
.qm-fig figcaption span{font-size:14px;color:var(--jn-muted)}

/* ── 신뢰성 시험 — 첫 칸만 크게 (비대칭) ───── */
.qm-rel{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:22px 20px}
.qm-fig-lead{grid-row:span 2}
.qm-fig-lead img{aspect-ratio:3/4}
.qm-rel .qm-fig:nth-child(4){grid-column:2/4}
.qm-rel .qm-fig:nth-child(4) img{aspect-ratio:16/7}

/* ── 무연 생산 — 텍스트 + 사진 2단 ────────── */
.qm-env{display:grid;grid-template-columns:1fr 440px;gap:56px;align-items:center}
.qm-env-text .jn-list strong{font-weight:700;color:var(--jn-primary)}
.qm-env-fig img{aspect-ratio:5/4}

/* ── 인증 ─────────────────────────────────── */
.qm-cert{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.qm-cert-card{
  flex:0 0 auto;min-width:212px;padding:24px 26px;
  background:var(--t1);border-radius:6px;border-left:3px solid var(--jn-primary);
}
.qm-cert-code{
  margin:0 0 4px;font-family:'IBM Plex Mono','Consolas',monospace;
  font-size:21px;font-weight:600;letter-spacing:.02em;color:var(--jn-primary);
}
.qm-cert-name{margin:0;font-size:15px;font-weight:600;color:var(--jn-ink)}
.qm-cert-more{margin:0;font-size:14.5px;color:var(--jn-muted)}
.qm-cert-more a{color:var(--jn-primary);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ── 반응형 ───────────────────────────────── */
@media (max-width:1100px){
  .qm-flow{grid-template-columns:1fr;gap:26px}
  .qm-flow-aside{position:static}
  .qm-env{grid-template-columns:1fr;gap:30px}
  .qm-env-fig{max-width:560px}
  .qm-rel{grid-template-columns:1fr 1fr}
  .qm-fig-lead{grid-row:auto;grid-column:1/3}
  .qm-fig-lead img{aspect-ratio:16/8}
  .qm-rel .qm-fig:nth-child(4){grid-column:auto}
  .qm-rel .qm-fig:nth-child(4) img{aspect-ratio:4/3}
}
@media (max-width:820px){
  .qm-hero{margin:0 0 46px}
  .qm-hero img{aspect-ratio:16/9}
  .qm-step{grid-template-columns:50px 1fr;gap:14px;padding:20px 2px}
  .qm-no{font-size:18px}
  .qm-step-title{font-size:16.5px}
  .qm-step-note{font-size:14.5px}
  .qm-rel{grid-template-columns:1fr;gap:26px}
  .qm-fig-lead{grid-column:auto}
  .qm-fig-lead img,.qm-rel .qm-fig:nth-child(4) img{aspect-ratio:4/3}
  .qm-cert-card{min-width:0;flex:1 1 100%}
}