/* 지페 · 다운로드 (body.pg-download): 기기 선택 무대 · QR 스캔 · 단계 라인 · 업데이트 토스트 · 마스코트
   원칙: transform · opacity 만 움직이고, JS가 없거나 모션 줄이기를 켜면 "앱이 열린" 마지막 모습을 그대로 보여 줘요. */

/* ── 히어로: 오른쪽 무대 ─────────────────────────────── */
.pg-download .pg-hero__vis{display:block;place-items:stretch;align-self:center;min-height:0;padding:0;border-radius:0;background:none;overflow:visible}
.dls{padding:clamp(12px,1.2vw,20px);border-radius:var(--r4);background:#fff;box-shadow:var(--sh1)}
.dls__tabs{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:4px;border-radius:16px;background:var(--mist)}
html:not(.js) .dls__tabs{display:none}
.dls__pill{position:absolute;left:4px;top:4px;bottom:4px;width:calc((100% - 8px) / 3);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(25,31,40,.08),0 6px 14px -6px rgba(25,31,40,.2);transform:translateX(calc(var(--i,0) * 100%));transition:transform .5s var(--spring)}
.dls[data-dev="store"]{--i:1}
.dls[data-dev="pos"]{--i:2}
.dls__tab{position:relative;z-index:1;height:44px;padding:0 6px;border:0;border-radius:12px;background:none;color:var(--ink2);font-size:clamp(14px,1.05vw,16px);font-weight:800;letter-spacing:-.02em;white-space:nowrap;cursor:pointer;transition:color .25s}
.dls__tab[aria-selected="true"]{color:var(--ink)}
.dls__tab:hover{color:var(--ink)}
.dls__tab:focus-visible{outline-offset:-2px}
.dls__view{position:relative;display:grid;margin-top:clamp(10px,1vw,16px);height:clamp(436px,33vw,610px);border-radius:var(--r3);background:var(--mist);overflow:hidden}
.dls__view::before{content:"";position:absolute;left:50%;bottom:7%;width:56%;height:7%;margin-left:-28%;border-radius:50%;background:radial-gradient(closest-side,rgba(25,31,40,.22),transparent);filter:blur(4px)}
.dlph,.dlpc{grid-area:1 / 1;place-self:center;transition:opacity .45s var(--out),transform .6s var(--out),visibility 0s}
.dls[data-dev="pos"] .dls__view::before{opacity:0}
.dls[data-dev="pos"] .dlph{opacity:0;visibility:hidden;transform:translateY(22px) scale(.92);transition:opacity .35s var(--out),transform .5s var(--out),visibility 0s .35s}
.dls:not([data-dev="pos"]) .dlpc{opacity:0;visibility:hidden;transform:translateY(22px) scale(.94);transition:opacity .3s var(--out),transform .5s var(--out),visibility 0s .3s}
.dls__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;margin-top:clamp(10px,1vw,16px);padding:0 4px}
.dls__cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;font-size:15px}
.dls__cap b{font-weight:800;letter-spacing:-.02em}
.dls__cap span{color:var(--ink2);font-size:13px;font-weight:700}
.dls__acts{display:flex;align-items:center;gap:6px}
.dls__re,.dls__go{height:36px;padding:0 14px;border:0;border-radius:11px;font-size:14px;font-weight:800;cursor:pointer;transition:background .2s,color .2s,transform .2s var(--out)}
.dls__re{background:var(--mist);color:var(--ink2)}
.dls__re:hover{background:#e5e8eb;color:var(--ink)}
.dls__re[hidden]{display:none}
.dls__go{display:inline-flex;align-items:center;background:var(--blue);color:#fff}
.dls__go::after{content:"";width:7px;height:7px;margin:0 0 3px 8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--out)}
.dls__go:hover::after{transform:translateY(3px) rotate(45deg)}
.dls__go:hover{background:#1a42c0}

/* ── 휴대폰: 설치 → 아이콘 → 열림 (기본 = 열린 모습) ───────── */
.pg-download .dlph .dev{width:clamp(196px,15.5vw,268px);margin:0;transform-origin:50% 60%}
.dlph__cam{position:absolute;z-index:4;left:50%;top:2.6%;width:24%;height:2.2%;margin-left:-12%;border-radius:99px;background:#0b0d12}
.dlph__screen{position:relative;aspect-ratio:560/1140;overflow:hidden;border-radius:1.8em;background:#fff;isolation:isolate}
.dlph__open{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 0 round 0px)}
.pg-download .dlph .dlph__shot{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:0;background:#fff;object-fit:cover;object-position:top;transition:opacity .3s}
.dls[data-dev="member"] .dlph__shot.s,.dls[data-dev="store"] .dlph__shot.m{opacity:0}
.dlph__home{position:absolute;inset:0;z-index:1;display:grid;grid-template-rows:auto auto 1fr;gap:8%;padding:15% 7.5% 6%;background:linear-gradient(168deg,#2f56b8 0%,#1d3376 46%,#101b42 100%);color:#fff;opacity:0;visibility:hidden}
.dlph__wg{display:grid;gap:.6em;align-content:center;aspect-ratio:2.1;padding:0 1.2em;border-radius:1.3em;background:rgba(255,255,255,.14)}
.dlph__wg i{display:block;height:.7em;border-radius:99px;background:rgba(255,255,255,.4)}
.dlph__wg i+i{width:55%;background:rgba(255,255,255,.22)}
.dlph__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20% 7%;align-content:start}
.dlph__grid>i{display:block;aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.18)}
.dlph__grid>i.t2{background:rgba(138,169,255,.46)}
.dlph__grid>i.t3{background:rgba(255,255,255,.1)}
.dlph__slot{position:relative}
.dlph__slot::before{content:"";position:absolute;inset:0;border:2px dashed rgba(255,255,255,.4);border-radius:24%;opacity:0;transition:opacity .3s}
.dlph__app{position:relative;display:block;aspect-ratio:1;border-radius:24%;background:#fff;box-shadow:0 .7em 1.5em -.5em rgba(0,0,0,.55)}
.pg-download .dlph .dlph__app img{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:24%;background:#fff;transition:opacity .3s}
.dls[data-dev="member"] .dlph__app .s,.dls[data-dev="store"] .dlph__app .m{opacity:0}
.dlph__ring{position:absolute;left:-17%;top:-17%;width:134%;height:134%;rotate:-90deg;opacity:0;pointer-events:none}
.dlph__ring circle{fill:none}
.dlph__ring .trk{stroke:rgba(255,255,255,.28);stroke-width:2}
.dlph__ring .prg{stroke:var(--wave);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.dlph__lbl{position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);color:#fff;font-size:11px;font-weight:700;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.dls[data-dev="member"] .dlph__lbl .s,.dls[data-dev="store"] .dlph__lbl .m{display:none}
.dlph__dock{align-self:end;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7%;padding:5%;border-radius:1.4em;background:rgba(255,255,255,.14)}
.dlph__dock i{display:block;aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.34)}
.dlph__slot::after{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;margin:-75% 0 0 -75%;border-radius:50%;background:rgba(255,255,255,.5);opacity:0;transform:scale(0);pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  /* 설치 전(= 아직 열리지 않음)에는 런처가 보이고, 열린 화면은 아이콘 크기로 접혀 있어요 */
  .js .dlph:not(.is-open) .dlph__home{opacity:1;visibility:visible;transition:none}
  .js .dlph__home{transition:opacity .5s .2s ease,transform .85s var(--out),visibility 0s .85s}
  .js .dlph.is-open .dlph__home{transform:scale(1.16)}
  .js .dlph .dlph__shot{transition:opacity .3s,transform .95s var(--out)}
  .js .dlph:not(.is-open) .dlph__shot{transform:scale(1.14);transition:none}
  .js .dlph__open{transition:clip-path .85s var(--out),opacity .3s ease}
  .js .dlph:not(.is-open) .dlph__open{opacity:0;clip-path:inset(var(--ct,40%) var(--cr,40%) var(--cb,40%) var(--cl,40%) round var(--cq,14px));transition:none}
  .js .dlph .dlph__slot::before{opacity:0}
  .js .dlph:not(.is-ring) .dlph__slot::before{opacity:1}
  .js .dlph:not(.is-ring) .dlph__app{opacity:0;transform:scale(.82)}
  .js .dlph.is-ring:not(.is-pop) .dlph__app{opacity:.42;filter:grayscale(1);transform:scale(.9)}
  .js .dlph__app{transition:opacity .35s,transform .45s var(--out),filter .35s}
  .js .dlph.is-pop .dlph__app{animation:dlpop .6s var(--out)}
  .js .dlph.is-ring:not(.is-pop) .dlph__ring{opacity:1}
  .js .dlph.is-pop .dlph__ring{opacity:0;transform:scale(1.18);transition:opacity .35s,transform .45s var(--out)}
  .js .dlph.is-ring .dlph__ring .prg{stroke-dashoffset:0;transition:stroke-dashoffset 1.7s linear}
  .js .dlph:not(.is-pop) .dlph__lbl{opacity:0}
  .js .dlph__lbl{transition:opacity .35s}
  .js .dlph.is-tap .dlph__slot::after{animation:dltap .55s var(--out)}
  .js .dls.is-swap .dlph .dev{animation:dlswap .55s var(--out)}
  .js .dls.no-tr *,.js .dls.no-tr *::before,.js .dls.no-tr *::after{transition:none!important;animation:none!important}
}
@keyframes dlpop{0%{transform:scale(.9)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes dltap{0%{opacity:.75;transform:scale(.2)}100%{opacity:0;transform:scale(1)}}
@keyframes dlswap{0%{transform:translateY(14px) scale(.97)}100%{transform:none}}

/* ── PC 창: 5단계 설치 (기본 = 5단계 '사용 시작') ───────── */
.dlpc{display:flex;flex-direction:column;align-items:center;gap:10px;width:min(90%,520px)}
.dlpc__win{width:100%;overflow:hidden;border-radius:14px;background:#fff;box-shadow:var(--sh2)}
.dlpc__bar{display:flex;align-items:center;gap:6px;height:26px;padding:0 11px;background:#eef1f6}
.dlpc__bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.dlpc__bar i:nth-child(2){background:#febc2e}
.dlpc__bar i:nth-child(3){background:#28c840}
.dlpc__body{position:relative;aspect-ratio:1384/821;overflow:hidden;container-type:inline-size;background:#eef1f6}
.dlpc .sc{position:absolute;inset:0;display:grid;place-items:center;font-size:max(11.5px,2.9cqw);opacity:0;visibility:hidden;transform:scale(.97);transition:opacity .35s ease,transform .5s var(--out),visibility 0s .35s}
.dlpc[data-step="1"] .sc1,.dlpc[data-step="2"] .sc2,.dlpc[data-step="3"] .sc3,.dlpc[data-step="4"] .sc4,.dlpc[data-step="5"] .sc5{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dlpc .sc5{padding:0}
.dlpc .sc5 img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:top left}
.dlpc[data-step="5"] .sc5 img{animation:dlzoom .8s var(--out)}
@keyframes dlzoom{from{transform:scale(1.06)}to{transform:none}}
@keyframes dlfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes dlhide{to{opacity:0}}
@keyframes dlshow{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.dlpc .a,.dlpc .b{grid-area:1/1}
.dlpc .b{opacity:0}
/* 1 내려받기 */
.sc1{background:#e4e8ee}
.sc1__card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:1em;width:23em;padding:1.1em 1.3em;border-radius:1.1em;background:#fff;box-shadow:0 1.2em 2.6em -1em rgba(25,31,40,.4)}
.sc1__ico{display:grid;place-items:center;width:3em;height:3.6em;border-radius:.6em;background:var(--blue);color:#fff;font-size:1em;font-weight:800;letter-spacing:.02em}
.sc1__tx{display:grid;gap:.45em;min-width:0}
.sc1__tx b{overflow:hidden;font-size:1.05em;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
.sc1__bar,.sc2__bar{display:block;height:.55em;overflow:hidden;border-radius:99px;background:#e5e8eb}
.sc1__bar i,.sc2__bar i{display:block;height:100%;border-radius:inherit;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.dlpc[data-step="1"] .sc1__bar i{animation:dlfill 1.3s .3s linear both}
.sc1__tx em,.sc2 p{display:grid;color:var(--ink2);font-size:.92em;font-style:normal;font-weight:700}
.dlpc[data-step="1"] .sc1 .a{animation:dlhide .01s 1.65s forwards}
.dlpc[data-step="1"] .sc1 .b{color:#0d7a4d;animation:dlshow .3s 1.65s forwards}
/* 2 설치 */
.sc2{background:#d9dfe9}
.sc2__win{display:grid;gap:.8em;width:22em;padding:1.2em 1.4em 1.1em;border-radius:1em;background:#fff;box-shadow:0 1.2em 2.6em -1em rgba(25,31,40,.4)}
.sc2__h{display:flex;align-items:center;gap:.7em}
.sc2__h img{width:2.4em;height:2.4em;border-radius:.55em;box-shadow:0 0 0 1px var(--line)}
.sc2__h b{font-size:1.05em;font-weight:800}
.sc2 small{color:var(--ink2);font-size:.9em;font-weight:600}
.dlpc[data-step="2"] .sc2__bar i{animation:dlfill 1.5s .25s cubic-bezier(.4,.1,.4,1) both}
.dlpc[data-step="2"] .sc2 .a{animation:dlhide .01s 1.75s forwards}
.dlpc[data-step="2"] .sc2 .b{color:#0d7a4d;animation:dlshow .3s 1.75s forwards}
/* 3 바탕화면 */
.sc3{background:linear-gradient(160deg,#3a63c7,#1a2b5c)}
.sc3__grid{display:grid;grid-template-columns:repeat(4,4.6em);gap:1.6em 1.3em;justify-items:center}
.sc3__grid>i{display:block;width:3.6em;height:3.6em;border-radius:.9em;background:rgba(255,255,255,.2)}
.sc3__sc{display:grid;justify-items:center;gap:.4em;color:#fff;font-size:1em}
.sc3__sc img{width:3.6em;height:3.6em;border-radius:.9em;background:#fff;box-shadow:0 .6em 1.2em -.4em rgba(0,0,0,.5)}
.sc3__sc span{font-size:.82em;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.dlpc[data-step="3"] .sc3__sc{animation:dlpop .7s .35s var(--out) both}
.dlpc[data-step="3"] .sc3__sc span{animation:dlshow .4s .8s both}
/* 4 로그인 */
.sc4{background:#e4e8ee}
.sc4__card{display:grid;gap:.8em;width:20em;padding:1.3em 1.5em 1.4em;border-radius:1.1em;background:#fff;box-shadow:0 1.2em 2.6em -1em rgba(25,31,40,.4)}
.sc4__card>b{font-size:1.25em;font-weight:800}
.sc4__f{display:grid;gap:.3em}
.sc4__f span{color:var(--ink2);font-size:.86em;font-weight:700}
.sc4__f i{display:flex;align-items:center;gap:.35em;height:2.4em;padding:0 .9em;border-radius:.6em;background:var(--mist)}
.sc4__f .u::after{content:"";display:block;width:6.5em;height:.6em;border-radius:99px;background:#9aa6b8;transform-origin:left;transform:scaleX(0)}
.sc4__f s{width:.6em;height:.6em;border-radius:50%;background:#4e5968;opacity:0;transform:scale(0)}
.sc4__btn{display:grid;place-items:center;height:2.6em;border-radius:.7em;background:var(--blue);color:#fff;font-weight:800}
.dlpc[data-step="4"] .sc4__f .u::after{animation:dlfill .7s .3s steps(8,end) both}
.dlpc[data-step="4"] .sc4__f s{animation:dlpop .25s var(--out) both}
.dlpc[data-step="4"] .sc4__f s:nth-child(1){animation-delay:.95s}
.dlpc[data-step="4"] .sc4__f s:nth-child(2){animation-delay:1.03s}
.dlpc[data-step="4"] .sc4__f s:nth-child(3){animation-delay:1.11s}
.dlpc[data-step="4"] .sc4__f s:nth-child(4){animation-delay:1.19s}
.dlpc[data-step="4"] .sc4__f s:nth-child(5){animation-delay:1.27s}
.dlpc[data-step="4"] .sc4__f s:nth-child(6){animation-delay:1.35s}
.dlpc[data-step="4"] .sc4__btn{animation:dlpress .4s 1.7s var(--out)}
@keyframes dlpress{0%{transform:none}40%{transform:scale(.95);background:#1639a8}100%{transform:none}}
/* 단계 점 */
.dlpc__rail{display:flex;align-items:center;justify-content:center}
.dlpc__rail li{display:flex;align-items:center}
.dlpc__rail li:not(:last-child)::after{content:"";width:clamp(14px,2vw,26px);height:2px;margin:0 3px;border-radius:2px;background:#d5dae1;transition:background .4s}
.dlpc__rail li.is-done:not(:last-child)::after{background:var(--blue)}
.dlpc__st{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #d5dae1;color:var(--ink2);font-size:12px;font-weight:800;cursor:pointer;transition:background .3s,color .3s,box-shadow .3s,transform .3s var(--spring)}
.dlpc__st:hover{transform:scale(1.1)}
.is-done .dlpc__st{background:var(--blue);box-shadow:none;color:#fff}
.is-on .dlpc__st{background:var(--ink);box-shadow:none;color:#fff;transform:scale(1.12)}
.dlpc[data-step="5"] .dlpc__rail li:last-child .dlpc__st{background:var(--blue)}
.dlpc__now{display:flex;align-items:center;gap:8px;margin:0;font-size:15px;font-weight:800;letter-spacing:-.02em}
.dlpc__now b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px}

/* ── 모바일 앱 카드 · QR ──────────────────────────── */
.pg-download .dl2__c{transform-origin:50% 60%}
.dlqr{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,2.6vw,48px);margin-top:clamp(14px,1.4vw,24px);padding:clamp(20px,2.2vw,36px) clamp(22px,2.6vw,44px);border-radius:var(--r3);background:var(--mist)}
.dlqr__box{position:relative;width:clamp(124px,10.5vw,172px);aspect-ratio:1;padding:13px;border-radius:20px;background:#fff;box-shadow:var(--sh1)}
.dlqr__box img{width:100%;height:100%;image-rendering:pixelated}
.dlqr__sc{position:absolute;inset:11px;overflow:hidden;border-radius:6px;pointer-events:none}
.dlqr__sc i{position:absolute;inset:0;background:linear-gradient(180deg,transparent 0,rgba(30,77,216,.16) calc(100% - 22px),rgba(30,77,216,.55) calc(100% - 3px),var(--blue) calc(100% - 3px));transform:translateY(-100%);animation:dlscan 2.8s cubic-bezier(.45,.05,.55,.95) infinite alternate;will-change:transform}
.dlqr.is-off .dlqr__sc i{animation-play-state:paused}
.dlqr:hover .dlqr__sc i{animation-duration:1.1s}
@keyframes dlscan{to{transform:translateY(0)}}
.dlqr__c{position:absolute;width:20px;height:20px;border:0 solid var(--blue);pointer-events:none;transition:transform .35s var(--spring)}
.dlqr__c--a{left:5px;top:5px;border-width:3px 0 0 3px;border-top-left-radius:8px}
.dlqr__c--b{right:5px;top:5px;border-width:3px 3px 0 0;border-top-right-radius:8px}
.dlqr__c--c{left:5px;bottom:5px;border-width:0 0 3px 3px;border-bottom-left-radius:8px}
.dlqr__c--d{right:5px;bottom:5px;border-width:0 3px 3px 0;border-bottom-right-radius:8px}
.dlqr:hover .dlqr__c--a,.dlqr__box:focus-within .dlqr__c--a{transform:translate(4px,4px)}
.dlqr:hover .dlqr__c--b{transform:translate(-4px,4px)}
.dlqr:hover .dlqr__c--c{transform:translate(4px,-4px)}
.dlqr:hover .dlqr__c--d{transform:translate(-4px,-4px)}
.dlqr__txt h3{font-size:clamp(20px,1.7vw,30px);font-weight:800;letter-spacing:-.03em}
.dlqr__txt p{max-width:30em;margin-top:.5em;color:var(--ink2);font-size:clamp(16px,1.15vw,19px);line-height:1.6}
@media (hover:none) and (max-width:900px),(max-width:560px){.dlqr{display:none}}

/* ── PC 프로그램: 사양 · 내 PC 확인 · 받기 버튼 ─────── */
.pcdl__spec{min-width:0}
.dlos{margin-top:14px;padding:.85em 1.15em;border-radius:14px;background:#e3f5ec;color:#0d7a4d;font-size:15px;font-weight:700;line-height:1.5}
.dlos[hidden]{display:none}
.dlos.is-warn{background:#fff3e0;color:#7a4a00}
.dlos:not([hidden]){animation:dlshow .5s var(--out)}
.btn--dl::before{content:"";width:.55em;height:.55em;margin:-.25em .15em 0 0;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg);transition:transform .35s var(--spring)}
.btn--dl:hover::before{transform:translateY(.18em) rotate(45deg)}
.btn--dl.is-press::before{animation:dlfall .6s var(--out)}
@keyframes dlfall{0%{transform:translateY(-.5em) rotate(45deg);opacity:0}60%{opacity:1}100%{transform:rotate(45deg)}}
.pg-download #alt .card{min-height:clamp(200px,16vw,260px)}

/* ── 설치 순서: 스크롤하면 선이 이어지고 단계가 켜져요 ─────── */
.pg-download .flow{position:relative}
.pg-download .flow li::before{position:relative;z-index:1;transition:background .45s,color .45s,box-shadow .45s}
.pg-download .flow.is-line::before,.pg-download .flow.is-line::after{content:"";position:absolute;left:var(--lx,24px);top:var(--ly0,0px);width:3px;height:var(--lh,0px);margin-left:-1.5px;border-radius:3px;background:var(--line)}
.pg-download .flow.is-line::after{background:var(--blue);transform-origin:top;transform:scaleY(var(--p,0))}
.js .pg-download .flow.is-line li>div{opacity:.42;transform:translateX(-6px);transition:opacity .5s,transform .6s var(--out)}
.js .pg-download .flow.is-line li.is-on>div{opacity:1;transform:none}
.js .pg-download .flow.is-line li:not(.is-on)::before{background:#fff;color:var(--ink3);box-shadow:inset 0 0 0 2px var(--line)}
.js .pg-download .flow.is-line li.is-on::before{background:var(--blue);color:#fff;animation:dlpop .55s var(--out)}

/* ── 자동 업데이트: 눌러 보는 토스트 ────────────────── */
.dlauto{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,96px);align-items:center}
.dlauto__t .sec__head{margin-bottom:0}
.dlup{padding:clamp(12px,1.2vw,20px);border-radius:var(--r3);background:var(--mist)}
.dlup__tabs{display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:14px;background:#e5e8eb}
.dlup__tab{height:38px;padding:0 16px;border:0;border-radius:10px;background:none;color:var(--ink2);font-size:14px;font-weight:800;white-space:nowrap;cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.dlup__tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(25,31,40,.08),0 4px 10px -4px rgba(25,31,40,.2)}
.dlup__view{position:relative;display:grid;height:clamp(300px,24vw,400px);margin-top:12px;border-radius:var(--r2);background:#fff;overflow:hidden}
.dlup__pc,.dlup__app{grid-area:1/1;position:relative;display:grid;place-items:center;transition:opacity .35s var(--out),transform .5s var(--out),visibility 0s}
.dlup[data-mode="pc"] .dlup__app,.dlup[data-mode="app"] .dlup__pc{opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .4s var(--out),visibility 0s .25s}
.dlup__win{width:min(88%,500px);overflow:hidden;border-radius:12px;background:#fff;box-shadow:var(--sh2);transition:transform .5s var(--out)}
.dlup__bar{display:flex;align-items:center;gap:5px;height:22px;padding:0 9px;background:#eef1f6}
.dlup__bar i{width:8px;height:8px;border-radius:50%;background:#ff5f57}
.dlup__bar i:nth-child(2){background:#febc2e}
.dlup__bar i:nth-child(3){background:#28c840}
.dlup__win img,.dlup__scr>img{width:100%;height:auto;max-width:none;border-radius:0;transition:opacity .4s,filter .4s}
.dlup[data-st="busy"] .dlup__win img,.dlup[data-st="busy"] .dlup__scr>img{opacity:.35}
.dlup[data-st="done"] .dlup__win{animation:dlboot .7s var(--out)}
@keyframes dlboot{0%{transform:scale(.96)}100%{transform:none}}
.dlup__toast{position:absolute;right:5%;bottom:9%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:min(86%,400px);padding:12px 14px;overflow:hidden;border-radius:18px;background:var(--ink);color:#fff;box-shadow:0 22px 44px -14px rgba(25,31,40,.55)}
.dlup__toast::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--wave);transform-origin:left;transform:scaleX(0)}
.dlup[data-st="busy"] .dlup__toast::after{animation:dlfill 1.6s linear both}
.dlup__ic{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--blue)}
.dlup__ic svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dlup__ic svg+svg{display:none}
.dlup[data-st="done"] .dlup__ic{background:#18a86b}
.dlup[data-st="done"] .dlup__ic svg:first-child{display:none}
.dlup[data-st="done"] .dlup__ic svg+svg{display:block}
.dlup[data-st="busy"] .dlup__ic svg{animation:fxspin 1s linear infinite}
.dlup__tx{display:grid;gap:2px;min-width:0}
.dlup__tx b{font-size:14.5px;font-weight:800;letter-spacing:-.02em;line-height:1.3}
.dlup__tx em{color:#c3cad6;font-size:12.5px;font-style:normal;font-weight:600;line-height:1.4}
.dlup__btn{height:36px;padding:0 14px;border:0;border-radius:11px;background:var(--wave);color:var(--ink);font-size:13.5px;font-weight:800;white-space:nowrap;cursor:pointer;transition:transform .2s var(--out),background .2s,opacity .2s}
.dlup__btn:hover{transform:translateY(-1px)}
.dlup[data-st="busy"] .dlup__btn{opacity:.7;cursor:default}
.dlup[data-st="idle"].is-in .dlup__btn{animation:dlnudge 2.6s 1.2s ease-in-out 3}
.dlup.is-off .dlup__btn{animation-play-state:paused}
@keyframes dlnudge{0%,70%,100%{transform:none}78%{transform:scale(1.07)}86%{transform:scale(.98)}93%{transform:scale(1.03)}}
.js .dlup__toast{transition:opacity .6s var(--out),transform .7s var(--out)}
.js .dlup:not(.is-in) .dlup__toast{opacity:0;transform:translateY(16px)}
.dlup__app .dev{margin:0}
.dlup__scr{aspect-ratio:560/1140}
.dlup__scr>img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:top}
.dlup__sheet{position:absolute;left:0;right:0;bottom:0;display:grid;gap:7px;padding:8px 12px 13px;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 -12px 30px -8px rgba(25,31,40,.35);transition:transform .6s var(--out)}
.js .dlup:not(.is-in) .dlup__sheet{transform:translateY(100%)}
.dlup__grab{justify-self:center;width:32px;height:4px;border-radius:4px;background:#d5dae1}
.dlup__sheet .dlup__tx b{color:var(--ink);font-size:13px}
.dlup__sheet .dlup__tx em{color:var(--ink2);font-size:11.5px}
.dlup__pg{display:block;height:4px;overflow:hidden;border-radius:4px;background:#e5e8eb}
.dlup__pg i{display:block;height:100%;background:var(--blue);transform-origin:left;transform:scaleX(0)}
.dlup[data-st="busy"] .dlup__pg i{animation:dlfill 1.6s linear both}
.dlup[data-st="done"] .dlup__pg i{transform:none;background:#18a86b}
.dlup__btn--app{height:34px;background:var(--blue);color:#fff;font-size:13px}
.dlup__hint{margin:10px 4px 0;color:var(--ink2);font-size:13px;font-weight:700}
:is(.s-idle,.s-busy,.s-done){display:inline}
.dlup[data-st="idle"] :is(.s-busy,.s-done),.dlup[data-st="busy"] :is(.s-idle,.s-done),.dlup[data-st="done"] :is(.s-idle,.s-busy){display:none}

/* ── 마무리: 생각하는 마스코트 ─────────────────────── */
.pg-download .cta-band{position:relative;overflow:hidden}
.dlcta__m{position:absolute;z-index:0;right:max(24px,calc((100% - 1640px) / 2 + 24px));bottom:0;width:clamp(120px,11vw,190px);aspect-ratio:403/540;overflow:hidden;pointer-events:none}
.dlcta__m img{width:100%;height:auto;max-width:none;transform-origin:50% 100%;rotate:var(--tr,0deg);transition:rotate .5s var(--out)}
.js .dlcta__m img{transform:translateY(46%);transition:transform .9s var(--out) .15s,rotate .5s var(--out)}
.js .dlcta__m.is-in img{transform:none}
.dlcta__m.is-nod img{animation:dlnod .75s var(--out)}
@keyframes dlnod{0%{transform:none}25%{transform:translateY(4%) rotate(-2deg)}55%{transform:translateY(-1.5%) rotate(1.2deg)}100%{transform:none}}
.pg-download .cta-band .wrap{position:relative;z-index:1}

/* ── 좁은 화면 · 모션 줄이기 ───────────────────────── */
@media (max-width:1023px){
  .dls{max-width:580px}
  .dlauto{grid-template-columns:minmax(0,1fr)}
  .dlup__toast{right:4%;bottom:7%}
}
@media (max-width:560px){
  .dlpc__body{aspect-ratio:6/5}
  .dlpc .sc5{background:#eef1f6}
  .dlpc .sc5 img{object-fit:contain;object-position:center top}
  .sc4__card{gap:.5em;padding:1em 1.2em 1.1em}
  .sc4__f i{height:2em}
  .sc2__win{gap:.5em}
}
@media (max-width:1099px){
  .dlcta__m{position:relative;right:auto;display:block;width:120px;margin:26px auto -72px}
}
@media (max-width:767px){
  .dls__tab{font-size:14px}
  .dlpc__rail li:not(:last-child)::after{width:12px}
  .dlup__toast{grid-template-columns:auto minmax(0,1fr);width:90%}
  .dlup__toast .dlup__btn{grid-column:1/-1;justify-self:stretch}
}
@media (prefers-reduced-motion:reduce){
  .dlqr__sc i{animation:none;transform:translateY(-8%);opacity:.7}
  .dlup[data-st="idle"].is-in .dlup__btn{animation:none}
  .js .dlcta__m img{transform:none}
  .js .dlup:not(.is-in) .dlup__toast{opacity:1;transform:none}
  .js .dlup:not(.is-in) .dlup__sheet{transform:none}
}