/* QMS 솔루션 (/solutions/qms, 2026-11-04) — 접두사 q-. 개요 · 체크포인트 · FAQ는 solutions.css 공통 */
/* ---- 필요한 이유 · 현장 체감 (아이콘 카드) ---- */
.q-why,.q-field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.q-field{margin-top:48px}
.q-why li,.q-field li{padding:30px 28px;border:1px solid var(--e-line);border-radius:var(--r-card);background:#fff}
.q-why svg,.q-field svg{width:40px;height:40px;color:var(--e-red)}
.q-why h3,.q-field h3{margin-top:18px;font-family:var(--font-head);font-size:21px;font-weight:800;letter-spacing:-.03em}
.q-why p,.q-field p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--e-sub)}
/* ---- 품질 개선 흐름 ---- */
.q-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:48px}
.q-steps li{position:relative;padding:26px 22px;border-radius:var(--r-card);background:#fff}
.q-steps li+li::before{content:"";position:absolute;left:-12px;top:50%;width:12px;height:2px;background:var(--e-line)}
.q-steps li.is-key{background:var(--e-dark);color:#fff}
.q-steps span{font-family:var(--font-head);font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--e-red)}
.q-steps li.is-key span{color:var(--e-dsub)}
.q-steps h3{margin-top:12px;font-family:var(--font-head);font-size:19px;font-weight:800;letter-spacing:-.03em}
.q-steps p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--e-sub)}
.q-steps li.is-key p{color:var(--e-dsub)}
/* ---- MES 연동 (다크 밴드) ---- */
.q-cmp{margin-top:48px;overflow-x:auto;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card)}
.q-cmp table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px}
.q-cmp th,.q-cmp td{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;vertical-align:top}
.q-cmp tbody tr:last-child th,.q-cmp tbody tr:last-child td{border-bottom:0}
.q-cmp thead th{font-size:14px;font-weight:700;color:var(--e-dsub)}
.q-cmp thead th:last-child{color:#fff}
.q-cmp tbody th{width:120px;font-weight:700;color:var(--e-dsub)}
.q-cmp td{color:var(--e-dsub);line-height:1.6}
.q-cmp td:last-child{color:#fff}
.q-cmp:focus-visible{outline:2px solid var(--e-focus);outline-offset:3px}
.q-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px;counter-reset:qf}
.q-flow li{position:relative;padding:20px 20px 20px 56px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);counter-increment:qf}
.q-flow li::before{content:counter(qf);position:absolute;left:18px;top:20px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-size:13px;font-weight:700;background:#fff;color:var(--e-dark)}
.q-flow b{display:block;font-family:var(--font-head);font-size:17px;font-weight:800;color:#fff}
.q-flow span{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:var(--e-dsub)}
.q-gains{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}
.q-gains li{padding:24px 22px;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card)}
.q-gains h3{font-family:var(--font-head);font-size:18px;font-weight:800;color:#fff}
.q-gains p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--e-dsub)}
/* ---- 히어로 모션 ---- */
.q-orbit{transform-origin:260px 210px;animation:q-spin 8s linear infinite}
@keyframes q-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.q-orbit{animation:none}}
@media (max-width:1023px){
  .q-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-steps li+li::before{display:none}
  .q-flow,.q-gains{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .q-why,.q-field,.q-steps,.q-flow,.q-gains{grid-template-columns:1fr}
  .q-why,.q-field{margin-top:40px}
  .q-why li,.q-field li{padding:24px 20px}
  .q-cmp table{min-width:0;font-size:14px}
  .q-cmp th,.q-cmp td{padding:12px 12px}
  .q-cmp tbody th{width:72px}
}