/* 공개 사이트 solutions 공통 — 시안 wms.html, mes.html, pop.html, nicelabel.html에서 이식 (2026-11-02) */
/* ---- 솔루션 탭 ---- */
.e-rels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.e-rel{position:relative;display:flex;flex-direction:column;min-height:240px;padding:32px 28px 28px;border-radius:var(--r-card);border:1px solid var(--e-line);background:#fff;transition:border-color .2s,transform .25s,box-shadow .25s}
.e-rel:hover{border-color:#212222;transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,11,12,.08)}
.e-rel-l{font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--e-red)}
.e-rel h3{margin-top:10px;font-family:var(--font-head);font-size:24px;font-weight:800;letter-spacing:-.03em}
.e-rel p{margin-top:8px;font-size:16px;color:var(--e-sub)}
.e-rel-go{margin-top:auto;padding-top:24px;display:flex;align-items:center;justify-content:space-between;font-family:var(--font-head);font-size:15px;font-weight:700}
.e-rel-go i{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--e-line);transition:background-color .2s,color .2s,border-color .2s}
.e-rel-go svg{width:20px;height:20px}
.e-rel:hover .e-rel-go i{background:var(--e-black);color:#fff;border-color:var(--e-black)}
/* ---- 3PL · QMS 공통 (2026-11-04): 개요 · 체크포인트 · 자주 묻는 질문 · 안내 문구 ---- */
.e-ov{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.e-ov-text p{font-size:18px;line-height:1.8;color:var(--e-sub)}
.e-ov-text p+p{margin-top:18px}
.e-ov-text strong{color:var(--e-text)}
/* ---- 체크포인트 ---- */
.s-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.s-checks li{display:flex;gap:14px;padding:26px 24px;border:1px solid var(--e-line);border-radius:var(--r-card)}
.s-checks svg{flex:none;width:24px;height:24px;color:var(--e-red)}
.s-checks h3{font-family:var(--font-head);font-size:18px;font-weight:800;letter-spacing:-.03em}
.s-checks p{margin-top:6px;font-size:15px;line-height:1.6;color:var(--e-sub)}
/* ---- 자주 묻는 질문 (details 아코디언, JS 없음) ---- */
.s-faq{margin-top:40px;border-top:1px solid var(--e-text)}
.s-faq details{border-bottom:1px solid var(--e-line)}
.s-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;padding:18px 4px;cursor:pointer;list-style:none}
.s-faq summary::-webkit-details-marker{display:none}
.s-faq summary h3{font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:-.03em}
.s-faq summary svg{flex:none;width:22px;height:22px;transition:transform .2s}
.s-faq details[open] summary svg{transform:rotate(180deg)}
.s-faq summary:focus-visible{outline:2px solid var(--e-focus);outline-offset:2px}
.s-faq details p{padding:0 4px 24px;max-width:860px;font-size:16px;line-height:1.75;color:var(--e-sub)}
.s-note{margin-top:20px;font-size:14px;line-height:1.6;color:var(--e-mute)}
/* ---- 생산 · 품질 연결 (POP → MES → QMS, _SolutionChain) ---- */
.s-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px}
.s-chain li{position:relative}
.s-chain li+li::before{content:"";position:absolute;left:-30px;top:50%;width:20px;height:20px;border-top:2px solid var(--e-mute);border-right:2px solid var(--e-mute);transform:translateY(-50%) rotate(45deg)}
.s-chain li>a,.s-chain li.is-on{display:flex;flex-direction:column;height:100%;padding:28px;border:1px solid var(--e-line);border-radius:var(--r-card);background:#fff}
.s-chain li>a{transition:border-color .2s,transform .25s}
.s-chain li>a:hover{border-color:var(--e-text);transform:translateY(-3px)}
.s-chain li.is-on{border-color:var(--e-dark);background:var(--e-dark);color:#fff}
.s-chain-k{font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:.12em;color:var(--e-red)}
.s-chain li.is-on .s-chain-k{color:var(--e-dsub)}
.s-chain h3{margin-top:8px;font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.03em}
.s-chain p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--e-sub)}
.s-chain li.is-on p{color:var(--e-dsub)}
.s-chain-go,.s-chain-here{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:18px;font-family:var(--font-head);font-size:15px;font-weight:700}
.s-chain-go svg{width:18px;height:18px}
.s-chain-here{color:var(--e-dsub)}
@media (max-width:1023px){
  .s-chain{grid-template-columns:1fr;gap:32px}
  .s-chain li+li::before{left:50%;top:-24px;transform:translateX(-50%) rotate(135deg)}
  .e-ov{grid-template-columns:1fr;gap:28px}
  .s-checks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .e-rels{grid-template-columns:1fr}
  .e-rel{min-height:0}
}
@media (max-width:767px){
  .e-rel{padding:26px 22px 22px}
  .e-ov-text p{font-size:16px}
  .s-checks{grid-template-columns:1fr}
  .s-faq summary{min-height:64px}
  .s-faq summary h3{font-size:17px}
  .s-faq details p{font-size:15px}
}