/* 지페 · 회사소개 (about.html) 효과. 기본값 = 최종 모습. html.ab-on(모션 허용 + JS)일 때만 처음 상태가 숨김/흐림으로 시작합니다. */

/* ── 히어로: 결제 → 주문 → 매출관리 → 광고 → 운영 흐름 ── */
.pg-about .pg-hero__vis{place-items:center;padding-bottom:clamp(40px,4vw,72px)}
.ab-flow{--rh:clamp(64px,6.2vw,108px);--nd:clamp(38px,3.3vw,52px);position:relative;width:min(100%,480px);justify-self:center}
.ab-flow__list{position:relative;display:grid;grid-template-rows:repeat(5,var(--rh))}
.ab-flow__rail{position:absolute;left:calc(var(--nd)/2 - 1px);top:calc(var(--rh)/2);bottom:calc(var(--rh)/2);width:2px;border-radius:2px;background:rgba(255,255,255,.14)}
.ab-flow__fill{position:absolute;inset:0;border-radius:2px;background:var(--blue);transform-origin:50% 0}
.ab-flow__pkt{position:absolute;inset:0;display:none;pointer-events:none}
.ab-flow__pkt::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--wave);box-shadow:0 0 0 7px rgba(255,216,77,.2),0 0 28px rgba(255,216,77,.55)}
.ab-flow li{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(16px,1.8vw,28px)}
.ab-flow li>i{position:relative;flex:none;width:var(--nd);height:var(--nd);border-radius:50%;background:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.ab-flow li>i::after{content:"";position:absolute;left:50%;top:50%;width:.34em;height:.62em;margin:-.38em 0 0 -.17em;border-right:.14em solid #fff;border-bottom:.14em solid #fff;border-radius:1px;transform:rotate(40deg);font-size:clamp(20px,1.7vw,28px)}
.ab-flow li>b{color:#e6ebf5;font-size:clamp(28px,2.7vw,48px);font-weight:800;letter-spacing:-.045em;line-height:1.1}
/* 움직이는 중: 처음엔 모두 흐리게 → 차례로 켜짐 */
.ab-flow.is-live li>i{background:#1a1e26;box-shadow:0 0 0 2px rgba(255,255,255,.2);transition:background .45s,box-shadow .45s,transform .55s var(--spring)}
.ab-flow.is-live li>i::after{opacity:0;transition:opacity .3s}
.ab-flow.is-live li>b{color:#59627a;transition:color .45s,transform .6s var(--out)}
.ab-flow.is-live li.is-done>i{background:var(--blue);box-shadow:0 0 0 2px var(--blue)}
.ab-flow.is-live li.is-done>i::after{opacity:1}
.ab-flow.is-live li.is-done>b{color:#b8c2da}
.ab-flow.is-live li.is-on>i{background:var(--wave);box-shadow:0 0 0 2px var(--wave),0 0 0 9px rgba(255,216,77,.16);transform:scale(1.1)}
.ab-flow.is-live li.is-on>b{color:#fff;transform:translate3d(8px,0,0)}
.ab-flow.is-live .ab-flow__fill{transform:scaleY(var(--fp,0));transition:transform .8s var(--out)}
.ab-flow.is-live .ab-flow__pkt{display:block;transform:translate3d(0,calc((var(--fp,0) - 1)*100%),0);transition:transform .8s var(--out),opacity .4s}
.ab-flow.is-live.is-idle .ab-flow__pkt{opacity:0}
@media (hover:hover){.ab-flow li{cursor:default}}

/* ── 한 줄 정의: 스크롤에 따라 단어가 차례로 진해짐 ── */
.ab-on .ab-w{color:#c4cad3;transition:color .5s}
.ab-on .ab-w.on{color:var(--ink)}

/* ── 회사 이야기 길 ── */
.ab-path{--nd:clamp(40px,3.4vw,52px);--g:clamp(16px,2.4vw,48px);margin-top:clamp(56px,6vw,112px)}
.ab-path__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin-top:clamp(22px,2.4vw,40px)}
.ab-path__list>li{position:relative}
.ab-path__list a{display:block;border-radius:var(--r2);outline-offset:6px}
.ab-path__n{position:relative;z-index:1;display:grid;place-items:center;width:var(--nd);height:var(--nd);margin-bottom:clamp(14px,1.4vw,24px);border-radius:50%;background:var(--blue);color:#fff;font-size:clamp(14px,1.1vw,18px);font-weight:800;font-variant-numeric:tabular-nums;box-shadow:0 0 0 8px #fff;transition:background .4s,color .4s,transform .55s var(--spring)}
.ab-path__list b{display:block;font-size:clamp(22px,2vw,34px);font-weight:800;letter-spacing:-.04em;line-height:1.25}
.ab-path__list b::after{content:"→";display:inline-block;margin-left:.3em;color:var(--blue);opacity:0;transform:translate3d(-8px,0,0);transition:opacity .3s,transform .4s var(--out)}
.ab-path__d{display:block;margin-top:.5em;color:var(--ink2);font-size:clamp(15px,1.1vw,18px);line-height:1.6}
.ab-path__list a:hover b::after,.ab-path__list a:focus-visible b::after{opacity:1;transform:none}
.ab-path__list a:hover .ab-path__n{transform:scale(1.08)}
/* 다음 칸까지 이어지는 선 (회색 바탕 + 파란 채움) */
.ab-path__list>li:not(:last-child)::before,.ab-path__list>li:not(:last-child)::after{content:"";position:absolute;left:calc(var(--nd) + 14px);top:calc(var(--nd)/2 - 1px);width:calc(100% + var(--g) - var(--nd) - 28px);height:2px;border-radius:2px;background:var(--line)}
.ab-path__list>li:not(:last-child)::after{background:var(--blue);transform-origin:0 50%;transform:scaleX(var(--s,1))}
.ab-on .ab-path__list>li:not(:last-child)::after{transform:scaleX(var(--s,0));transition:transform .5s linear}
.ab-on .ab-path__n{background:#eef0f3;color:var(--ink3);transition:background .45s,color .45s,transform .55s var(--spring)}
.ab-on .ab-path__list>li.on .ab-path__n{background:var(--blue);color:#fff;transform:scale(1.06)}
.ab-on .ab-path__list>li.on:hover .ab-path__n{transform:scale(1.14)}
@media (max-width:767px){
  .ab-path__list{grid-template-columns:minmax(0,1fr);gap:0}
  .ab-path__list>li{padding-bottom:clamp(26px,7vw,36px)}
  .ab-path__list>li:last-child{padding-bottom:0}
  .ab-path__list a{display:grid;grid-template-columns:var(--nd) minmax(0,1fr);column-gap:18px}
  .ab-path__n{grid-row:1/3;margin-bottom:0}
  .ab-path__list>li:not(:last-child)::before,.ab-path__list>li:not(:last-child)::after{left:calc(var(--nd)/2 - 1px);top:calc(var(--nd) + 12px);width:2px;height:calc(100% - var(--nd) - 24px)}
  .ab-path__list>li:not(:last-child)::after{transform-origin:50% 0;transform:scaleY(var(--s,1))}
  .ab-on .ab-path__list>li:not(:last-child)::after{transform:scaleY(var(--s,0))}
  .ab-path__d{margin-top:.2em}
}

/* ── 전용 결제 서버: 큰 도로 vs 전용 통로 ── */
.ab-road{display:grid;gap:clamp(18px,2vw,30px);margin-top:clamp(36px,4vw,72px)}
.ab-road__lane{display:grid;gap:12px}
.ab-road__tag{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2em .8em;font-size:clamp(15px,1.15vw,19px);font-weight:800}
.ab-road__tag em{color:var(--ink2);font-size:.88em;font-style:normal;font-weight:600}
.ab-road__track{position:relative;container-type:inline-size;height:var(--th,120px);border-radius:20px;overflow:hidden}
.ab-road__lane--web .ab-road__track{--th:clamp(112px,9vw,152px);background:#dde1e8}
.ab-road__lane--web .ab-road__track::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.7) 22px 44px) 0 33%/100% 2px no-repeat,repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.7) 22px 44px) 0 66%/100% 2px no-repeat}
.ab-road__lane--cp .ab-road__track{--th:clamp(64px,5vw,84px);background:var(--navy)}
.ab-road__car{--ch:clamp(18px,1.7vw,26px);position:absolute;left:0;top:var(--y);width:var(--w,34px);height:var(--ch);margin-top:calc(var(--ch)/-2);border-radius:8px;background:var(--c,#9aa3b0);box-shadow:0 2px 0 rgba(25,31,40,.12);transform:translate3d(calc(var(--x,10) * 1cqw),0,0)}
.ab-road__car::after{content:"";position:absolute;right:12%;top:20%;bottom:20%;width:24%;border-radius:3px;background:rgba(255,255,255,.55)}
.is-play .ab-road__car{animation:abDrive var(--t,10s) linear infinite;animation-delay:calc(var(--o,0) * -1s)}
@keyframes abDrive{from{transform:translate3d(-70px,0,0)}to{transform:translate3d(calc(100cqw + 70px),0,0)}}
.ab-road__lane--cp .ab-road__track::before{content:"";position:absolute;left:4%;right:calc(clamp(14px,1.6vw,24px) + clamp(28px,2.4vw,38px) + 12px);top:50%;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 10px,transparent 10px 20px)}
.ab-road__pay{--pd:clamp(18px,1.6vw,24px);position:absolute;left:0;top:50%;width:var(--pd);height:var(--pd);margin-top:calc(var(--pd)/-2);border-radius:50%;background:var(--wave);box-shadow:0 0 0 6px rgba(255,216,77,.22),0 0 26px rgba(255,216,77,.6);transform:translate3d(calc(100cqw - clamp(60px,5.6vw,86px)),0,0)}
.ab-road__pay::before{content:"";position:absolute;right:100%;top:50%;width:clamp(60px,9cqw,140px);height:4px;margin-top:-2px;border-radius:4px;background:linear-gradient(90deg,transparent,rgba(255,216,77,.7))}
.ab-road__pay--2{display:none}
.is-play .ab-road__pay--2{display:block}
.ab-road__ok{--od:clamp(28px,2.4vw,38px);position:absolute;right:clamp(14px,1.6vw,24px);top:50%;display:grid;place-items:center;width:var(--od);height:var(--od);margin-top:calc(var(--od)/-2);border-radius:50%;background:#22c07a;color:#fff}
.ab-road__ok::after{content:"";width:.3em;height:.55em;margin-top:-.12em;border-right:.13em solid #fff;border-bottom:.13em solid #fff;transform:rotate(40deg);font-size:clamp(20px,1.7vw,28px)}
.is-play .ab-road__pay{animation:abPay 3.2s cubic-bezier(.45,0,.25,1) infinite}
.is-play .ab-road__pay--2{animation-delay:-1.6s}
.is-play .ab-road__ok{animation:abOk 1.6s ease infinite}
@keyframes abPay{0%{transform:translate3d(-40px,0,0);opacity:0}5%{opacity:1}50%{transform:translate3d(calc(100cqw - clamp(60px,5.6vw,86px)),0,0);opacity:1}54%,100%{transform:translate3d(calc(100cqw - clamp(60px,5.6vw,86px)),0,0);opacity:0}}
@keyframes abOk{0%{transform:scale(.84);opacity:.55}14%{transform:scale(1.2);opacity:1}30%,80%{transform:scale(1);opacity:1}100%{transform:scale(.9);opacity:.55}}

/* ── 핵심 가치: 위 선이 그어지고, 포인터를 따라 빛이 움직이고, 글자에 형광펜 ── */
.val__list li{--spot:rgba(255,216,77,.26)}
.val__list li.fx-spot{padding-bottom:clamp(18px,2vw,32px);border-radius:0 0 var(--r2) var(--r2)}
.val__list b{width:fit-content;background:linear-gradient(transparent 68%,var(--wave) 68%) no-repeat 0 0/0% 100%;transition:background-size .55s var(--out)}
.val__list li:hover b,.val__list li.is-on b{background-size:100% 100%}
.ab-on .val__list li{border-top-color:transparent}
.ab-on .val__list li::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.1s var(--out) calc(var(--k,0) * .12s)}
.ab-on .val__list.in li::after{transform:scaleX(1)}

/* ── 비전: 고객 · 가맹점 · 파트너가 지페 둘레를 도는 생태계 ── */
.ab-orbit{--sz:clamp(280px,26vw,420px);--rr:calc(var(--sz)*.38);position:relative;width:var(--sz);height:var(--sz);margin:clamp(36px,4vw,72px) auto 0}
.ab-orbit__r{position:absolute;left:50%;top:50%;border:1.5px solid rgba(255,255,255,.18);border-radius:50%;transform:translate(-50%,-50%)}
.ab-orbit__r--1{width:calc(var(--rr)*2);height:calc(var(--rr)*2)}
.ab-orbit__r--2{width:calc(var(--rr)*2 + var(--sz)*.22);height:calc(var(--rr)*2 + var(--sz)*.22);border-style:dashed;border-color:rgba(255,255,255,.1)}
.ab-orbit__core{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:calc(var(--sz)*.3);height:calc(var(--sz)*.3);border-radius:50%;background:var(--wave);color:var(--ink);font-size:clamp(20px,2vw,32px);font-weight:800;letter-spacing:-.04em;transform:translate(-50%,-50%);box-shadow:0 0 0 12px rgba(255,216,77,.14)}
.ab-orbit__spin{position:absolute;inset:0}
.ab-orbit__sat{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translate3d(var(--rr),0,0)}
.ab-orbit__sat b{position:absolute;left:0;top:0;display:block;padding:.5em 1.1em;border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:#fff;font-size:clamp(15px,1.2vw,19px);font-weight:800;white-space:nowrap;transform:translate(-50%,-50%) rotate(calc(var(--a) * -1))}
.is-play .ab-orbit__spin{animation:abSpin 56s linear infinite}
.is-play .ab-orbit__sat b{animation:abCounter 56s linear infinite}
@keyframes abSpin{to{transform:rotate(360deg)}}
@keyframes abCounter{from{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1))}to{transform:translate(-50%,-50%) rotate(calc(var(--a) * -1 - 360deg))}}
.is-play .ab-orbit__r--1{animation:abRing 5s ease-in-out infinite}
@keyframes abRing{0%,100%{border-color:rgba(255,255,255,.18)}50%{border-color:rgba(255,216,77,.5)}}

/* ── 회사 정보: 복사 ── */
.ab-kv dd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ab-kv .fx-cp{display:none;flex:none}
.fx .ab-kv .fx-cp{display:inline-flex}
@media (max-width:640px){.ab-kv dd{padding-top:.4em}}

@media (prefers-reduced-motion:reduce){
  .is-play .ab-road__car,.is-play .ab-road__pay,.is-play .ab-road__ok,.is-play .ab-orbit__spin,.is-play .ab-orbit__sat b,.is-play .ab-orbit__r--1{animation:none}
  .ab-road__car{transform:translate3d(calc(var(--x,10) * 1cqw),0,0)}
  .ab-road__pay{transform:translate3d(calc(100cqw - clamp(60px,5.6vw,86px)),0,0)}
}
@media print{
  .ab-on .ab-w{color:var(--ink)}
  .ab-on .ab-path__n{background:var(--blue);color:#fff}
  .ab-on .ab-path__list>li:not(:last-child)::after{transform:none}
  .ab-on .val__list li{border-top-color:var(--ink)}
  .ab-on .val__list li::after{display:none}
}