/* pg122 ODM/OEM 전용 — 공통 규칙(jungshin.css) 위에 얹는다.
   5단계를 좌→우로 맞물리는 화살표 바로 잇고, 단계가 진행될수록 면의 농도가 짙어진다.
   기준색 #134a8e 한 계열만 쓰고 아이콘·이미지는 쓰지 않는다. */

/* ── 프로세스 5단 ───────────────────────────── */
.od-flow{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 6px;
}
.od-step{display:flex;flex-direction:column}

/* 화살표 바 — 오른쪽이 뾰족하고 왼쪽이 파여 서로 맞물린다 */
.od-bar{
  display:flex;align-items:center;gap:10px;
  height:58px;padding:10px 26px 10px 30px;
  background:var(--tone);
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
}
.od-s1 .od-bar{
  padding-left:22px;
  clip-path:polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
  border-radius:4px 0 0 4px;
}
.od-s5 .od-bar{
  padding-right:22px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
  border-radius:0 4px 4px 0;
}

.od-num{
  font-family:'IBM Plex Mono','Consolas',monospace;font-size:15px;font-weight:600;
  letter-spacing:.02em;color:var(--jn-primary);opacity:.62;
}
/* 5열 폭이 좁아져도 바 높이가 어긋나지 않게 한 줄로 묶는다 */
.od-name{
  margin:0;white-space:nowrap;
  font-size:clamp(13px,1.08vw,15.5px);font-weight:800;letter-spacing:-.02em;line-height:1.35;
  color:var(--jn-primary);
}

.od-s1 .od-bar{--tone:var(--t1)}
.od-s2 .od-bar{--tone:var(--t2)}
.od-s3 .od-bar{--tone:var(--t3)}
.od-s4 .od-bar{--tone:var(--t4)}
.od-s5 .od-bar{--tone:var(--t5)}

/* 본문 — 면 없이 얇은 위선만. 바의 진행감을 방해하지 않는다. */
.od-body{flex:1;padding:22px 6px 0 24px}
.od-s1 .od-body{padding-left:16px}

.od-en{
  font-family:'IBM Plex Mono','Consolas',monospace;font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--jn-muted);margin:0 0 14px;
}
.od-items li{font-size:15px;line-height:1.7;padding-bottom:10px}
.od-items li::before{top:.66em;width:5px;height:5px}

/* ── 소개 영상 ───────────────────────────────── */
.od-movie{padding-top:14px}
.od-video{max-width:960px}
.od-video-frame{
  position:relative;width:100%;padding-top:56.25%;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--jn-line);
  box-shadow:0 16px 38px rgba(19,74,142,.12);
  background:#0e1420;
}
.od-video-frame iframe{
  position:absolute;top:0;left:0;width:100%;height:100%;border:0;
}

/* ── 반응형 ─────────────────────────────────── */
@media (max-width:1100px){
  /* 화살표 대신 세로 진행 — 좌측 번호 바, 우측 항목 */
  .od-flow{grid-template-columns:1fr;gap:0}
  .od-step{
    display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start;
    padding:22px 0;border-top:1px solid var(--jn-line);
  }
  .od-step:first-child{border-top:0}
  .od-bar,
  .od-s1 .od-bar,
  .od-s5 .od-bar{
    clip-path:none;border-radius:10px;height:auto;
    padding:14px 20px;justify-content:flex-start;
  }
  .od-name{white-space:normal;font-size:16px}
  .od-body,
  .od-s1 .od-body{padding:2px 0 0}
  .od-en{margin-bottom:10px}
}
@media (max-width:820px){
  .od-step{grid-template-columns:1fr;gap:14px;padding:20px 0}
  .od-name{font-size:16.5px}
  .od-items li{font-size:15px}
  .od-video-frame{border-radius:10px}
}