/* OMS 솔루션 (/solutions/oms, 2026-11-04) — 접두사 o-. 개요 · 체크포인트 · FAQ는 solutions.css 공통 */
.o-inline{color:var(--e-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
/* ---- 주요 기능 · 활용 현장 (아이콘 카드) ---- */
.o-fns,.o-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.o-cases{margin-top:48px}
.o-fns li,.o-cases li{padding:30px 28px;border:1px solid var(--e-line);border-radius:var(--r-card);background:#fff}
.o-fns svg,.o-cases svg{width:40px;height:40px;color:var(--e-red)}
.o-fns h3,.o-cases h3{margin-top:18px;font-family:var(--font-head);font-size:21px;font-weight:800;letter-spacing:-.03em}
.o-fns p,.o-cases p{margin-top:8px;font-size:16px;line-height:1.6;color:var(--e-sub)}
.o-cases .o-inline{display:inline-block;margin-top:6px;font-size:15px}
/* ---- 주문 흐름: OMS 줄(위) · WMS 줄(아래) 두 레인. 각 줄 왼쪽에 영역 이름, 줄 전체에 연한 띠(빈 칸에도 보여 영역 가이드가 된다) ---- */
.o-lane{display:grid;grid-template-columns:72px repeat(5,minmax(0,1fr));grid-template-rows:auto auto;gap:12px;margin-top:48px;counter-reset:ol}
.o-lane::before,.o-lane::after{grid-column:1/-1;display:flex;align-items:center;padding-left:18px;border-radius:var(--r-card);font-family:var(--font-head);font-size:14px;font-weight:800;letter-spacing:.1em}
.o-lane::before{content:"OMS";grid-row:1;background:rgba(140,10,27,.06);color:var(--e-red)}
.o-lane::after{content:"WMS";grid-row:2;background:rgba(20,21,23,.07);color:var(--e-text)}
.o-lane li{position:relative;z-index:1;padding:24px 20px;border-radius:var(--r-card);background:#fff;counter-increment:ol}
.o-lane li.is-oms{grid-row:1}
.o-lane li.is-wms{grid-row:2;background:var(--e-dark);color:#fff}
.o-lane li:nth-child(1){grid-column:2}.o-lane li:nth-child(2){grid-column:3}.o-lane li:nth-child(3){grid-column:4}
.o-lane li:nth-child(4){grid-column:5}.o-lane li:nth-child(5){grid-column:6}
.o-tag{display:none}
.o-lane b{display:block;font-family:var(--font-head);font-size:19px;font-weight:800;letter-spacing:-.03em}
.o-lane b::before{content:counter(ol,decimal-leading-zero) " ";color:var(--e-red);font-size:14px}
.o-lane li.is-wms b::before{color:var(--e-dsub)}
.o-lane p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--e-sub)}
.o-lane li.is-wms p{color:var(--e-dsub)}
/* ---- OMS · WMS 비교 (다크 밴드) ---- */
.o-cmp{margin-top:48px;overflow-x:auto;border:1px solid rgba(255,255,255,.18);border-radius:var(--r-card)}
.o-cmp table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px}
.o-cmp th,.o-cmp td{padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.12);text-align:left;vertical-align:top}
.o-cmp tbody tr:last-child th,.o-cmp tbody tr:last-child td{border-bottom:0}
.o-cmp thead th{font-size:14px;font-weight:700;color:var(--e-dsub)}
.o-cmp thead th:nth-child(2){color:#fff}
.o-cmp tbody th{width:120px;font-weight:700;color:var(--e-dsub)}
.o-cmp td{line-height:1.6;color:var(--e-dsub)}
.o-cmp td:nth-child(2){color:#fff}
.o-cmp:focus-visible{outline:2px solid var(--e-focus);outline-offset:3px}
/* ---- 연동 이유: 체크포인트 4개는 2열 ---- */
.o-why{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ---- 히어로 모션 ---- */
.o-flow{animation:o-dash 1.6s linear infinite}
@keyframes o-dash{to{stroke-dashoffset:-18}}
@media (prefers-reduced-motion:reduce){.o-flow{animation:none}}
@media (max-width:1023px){
  .o-lane{grid-template-columns:1fr;grid-template-rows:none;gap:10px}
  .o-lane::before,.o-lane::after{display:none}
  .o-lane li.is-oms,.o-lane li.is-wms,.o-lane li:nth-child(n){grid-row:auto;grid-column:auto}
  .o-lane li.is-wms{margin-left:32px}
  .o-tag{display:inline-flex;margin-bottom:10px}
}
@media (max-width:767px){
  .o-fns,.o-cases,.o-why{grid-template-columns:1fr}
  .o-fns,.o-cases{margin-top:40px}
  .o-fns li,.o-cases li{padding:24px 20px}
  .o-lane li.is-wms{margin-left:20px}
  .o-cmp table{min-width:0;font-size:14px}
  .o-cmp th,.o-cmp td{padding:12px}
  .o-cmp tbody th{width:72px}
}