/* v118 · Step 2 한 팀 실행: 가로선 → 순환 루프(벤 다이어그램과 같은 원 언어) + 단계별 설명 */
#services .lpx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,5vw,90px);align-items:center}
.lpx-fig{position:relative;width:100%;max-width:560px;justify-self:center}
.lpx-svg{width:100%;height:auto;overflow:visible;display:block}
.lp-ring{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1;vector-effect:non-scaling-stroke}
.lp-arc{fill:none;stroke:#fd4533;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1);transition-delay:calc(.5s + var(--k) * .45s)}
.lpx.in .lp-arc{stroke-dashoffset:0}
.lp-core{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.7);transition:opacity .7s ease .2s,transform .9s cubic-bezier(.22,1,.36,1) .2s;filter:drop-shadow(0 0 22px rgba(253,69,51,.25))}
.lpx.in .lp-core{opacity:1;transform:none}
.lp-core-k{font:700 22px var(--kr);fill:#fff;letter-spacing:-.04em}
.lp-core-s{font:500 13px var(--en);fill:rgba(255,255,255,.85);letter-spacing:.06em}
.lp-node circle{fill:#16161a;stroke:rgba(255,255,255,.4);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill .4s,stroke .4s}
.lp-node{opacity:0;transition:opacity .6s ease;transition-delay:calc(.3s + var(--k) * .45s)}
.lpx.in .lp-node{opacity:1}
.lp-w{font:750 20px var(--kr);fill:#fff;text-anchor:middle;letter-spacing:-.04em}
.lp-sh{font:600 13px var(--en);fill:rgba(255,255,255,.6);letter-spacing:.02em}
.lp-dot{fill:#fff;filter:drop-shadow(0 0 6px rgba(253,69,51,.6))}
.lpx[data-hl="0"] .lp-node[data-n="0"] circle,.lpx[data-hl="1"] .lp-node[data-n="1"] circle,.lpx[data-hl="2"] .lp-node[data-n="2"] circle{fill:#fd4533;stroke:#fd4533}
/* the list */
.lpx-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.14)}
.lpx-list li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:18px;align-items:center;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.1);transition:background .3s}
.lx-no{font:700 14px/1 var(--en);color:#fd4533;letter-spacing:.02em}
.lx-t{margin:0;display:flex;align-items:baseline;gap:10px}
.lx-t b{font:750 clamp(22px,1.9vw,28px)/1.2 var(--kr);letter-spacing:-.05em;color:#fff}
.lx-t small{font:600 13px/1 var(--en);color:rgba(255,255,255,.5)}
.lx-d{margin:6px 0 0;font:400 15px/1.55 var(--kr);color:rgba(255,255,255,.62)}
.lx-give{display:flex;flex-direction:column;align-items:flex-end;gap:4px;padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.14);font:600 13px/1.2 var(--kr);color:#fff;white-space:nowrap}
.lx-give small{font:500 11px/1 var(--kr);color:rgba(255,255,255,.45)}
.lpx-list li[data-n]:hover .lx-give{border-color:#fd4533}
.lpx-list li[data-n]:hover .lx-d{color:rgba(255,255,255,.9)}
.lx-back .lx-no{font-size:20px}
.lx-back .lx-t b{color:#fd4533}
@media (max-width:900px){#services .lpx{grid-template-columns:1fr}.lpx-fig{max-width:420px}.lpx-list li{grid-template-columns:36px 1fr}.lx-give{grid-column:2;align-items:flex-start;justify-self:start}}
@media (prefers-reduced-motion:reduce){.lp-arc,.lp-core,.lp-node{transition:none}.lp-dot{display:none}}