/* 모션P C줄 C10 장면 — eco-motion-explain.php 가 부른다(#1517). 원본 시험본: _teams/3팀_제작/모션P/C10_홈페이지제작_행동흐름.html · 자리목록 _teams/1팀_서비스기획/모션P_C_자리목록_1007.md 10위 */
/* ── C10 장면 ── */
.cmo-c10{max-width:none;margin:0 0 26px}   /* /홈페이지제작/ difference 구역 제목 아래·네 칸 위 — B줄 안3(네 칸 아래)과 네 칸으로 떨어진다. 폭은 네 칸과 맞춘다 */
/* 남색 구역 위 — 멈춤 단추 글자·테두리는 B줄 안3 어두운 판(eco-me--dark)과 같은 값 */
.c10-steps{list-style:none;display:flex;flex-wrap:wrap;gap:10px 32px;margin-bottom:28px}
.c10-steps li{position:relative;display:flex;align-items:center;gap:10px;padding-bottom:10px;font-size:15px;font-weight:600;color:var(--muted)}
.c10-steps li+li::before{content:"→";position:absolute;left:-23px;top:3px;font-weight:500;color:var(--muted)}
.c10-steps li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.c10-steps b{position:relative;width:26px;height:26px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:13px;font-weight:700;letter-spacing:0;color:var(--muted)}
.c10-steps b i{position:absolute;inset:-1px;border-radius:50%;background:var(--blue);color:var(--white);display:grid;place-items:center;font-style:normal;opacity:0}
.c10-steps em{font-style:normal;position:relative}
.c10-steps em i{position:absolute;left:0;top:0;font-style:normal;color:var(--ink);opacity:0;white-space:nowrap}
.c10-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);z-index:1}
.c10-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.c10-col{display:grid;gap:14px;align-content:start}
.c10-who{display:grid;gap:6px;min-height:72px}
.c10-who strong{font-size:17px;font-weight:650}
.c10-who span{font-size:14px;color:var(--muted);line-height:1.5}
.c10-wf{position:relative;height:262px;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden}
.c10-wf-bar{display:flex;gap:5px;align-items:center;height:24px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--white)}
.c10-wf-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.c10-hero{position:absolute;left:12px;right:12px;top:34px;height:40px;border-radius:7px;background:var(--navy)}
.c10-slot{position:absolute;left:12px;right:12px;height:38px;border-radius:7px}
.c10-g{background:var(--white);border:1px solid var(--line)}
.c10-g::before,.c10-g::after{content:"";position:absolute;left:10px;height:6px;border-radius:3px;background:var(--line)}
.c10-g::before{top:10px;width:46%}
.c10-g::after{top:21px;width:30%}
.c10-info{display:flex;align-items:center;gap:8px;padding:0 10px;background:var(--white);border:1px solid var(--ink);font-size:14px;font-weight:650;opacity:0}
.c10-info b{flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-items:center;font-size:12px;font-weight:700;letter-spacing:0}
.c10-info small{margin-left:auto;font-size:12px;font-weight:500;color:var(--muted)}
.c10-btn{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--blue);color:var(--white);font-size:14px;font-weight:650;border-radius:999px;opacity:0}
.c10-ring{position:absolute;left:12px;right:12px;height:38px;border-radius:999px;border:2px solid var(--blue);opacity:0}
.c10-link{position:absolute;left:21px;width:2px;background:var(--ink);transform-origin:50% 0;transform:scaleY(0)}
@container (max-width:639px){
  .c10-steps{gap:8px 22px;margin-bottom:18px}
  .c10-steps li{gap:6px;font-size:13px;padding-bottom:8px}
  .c10-steps li+li::before{left:-17px;top:2px}
  .c10-steps b{width:22px;height:22px;font-size:12px}
  .c10-cols{grid-template-columns:1fr;gap:16px}
  .c10-col{grid-template-columns:1fr 1.15fr;gap:12px;align-items:center}
  .c10-who{min-height:0;gap:4px}
  .c10-who strong{font-size:15px}
  .c10-who span{font-size:13px}
  .c10-wf{height:212px}
  .c10-wf-bar{height:18px}
  .c10-hero{top:26px;height:28px}
  .c10-slot,.c10-ring{left:8px;right:8px;height:32px}
  .c10-info{font-size:13px;gap:6px;padding:0 7px}
  .c10-info small{display:none}
  .c10-info b{width:18px;height:18px}
  .c10-btn{font-size:13px}
  .c10-link{left:16px}
}
/* JS 꺼짐 — 6.2초 완성 장면을 CSS 로만 놓는다(자리 값은 measure 와 같은 수) */
.cmo-stage:not(.js) .c10-steps b i,.cmo-stage:not(.js) .c10-steps em i,.cmo-stage:not(.js) .c10-info,.cmo-stage:not(.js) .c10-btn{opacity:1}
.cmo-stage:not(.js) .c10-bar{transform:none}
.cmo-stage:not(.js) [data-r=a]{top:84px}
.cmo-stage:not(.js) [data-r=b]{top:131px}
.cmo-stage:not(.js) .c10-btn{top:178px}
.cmo-stage:not(.js) .c10-g{top:225px;opacity:.45}
.cmo-stage:not(.js) .c10-g+.c10-g{display:none}
.cmo-stage:not(.js) .c10-link{top:103px;height:94px;transform:none}
@container (max-width:639px){
  .cmo-stage:not(.js) [data-r=a]{top:62px}
  .cmo-stage:not(.js) [data-r=b]{top:101px}
  .cmo-stage:not(.js) .c10-btn{top:140px}
  .cmo-stage:not(.js) .c10-g{top:179px}
  .cmo-stage:not(.js) .c10-link{top:78px;height:78px}
}