/* 지페 · 이용방법 (manual.html) 인터랙션: 이용 대상 선택 막대 · 구역 전환 · 카드 효과 · 자동 업데이트 그림
   JS가 없으면 이 파일의 효과는 모두 꺼져 있어요 (막대는 .js 일 때만 보이고, 위쪽 바로가기 칩이 대신함). */

html{scroll-padding-top:calc((84px + 64px)*var(--zm,1))}

/* ── 이용 대상 선택 막대 ───────────────────────── */
.mbar{display:none}
.js .mbar{display:block;position:sticky;top:var(--hdr);z-index:40;padding:10px 0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:top .4s var(--out),box-shadow .3s}
body:has(.hdr.is-away) .mbar{top:0}
.mbar.is-stuck{box-shadow:0 1px 0 rgba(25,31,40,.08),0 12px 24px -16px rgba(25,31,40,.22)}
.mbar__in{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,460px);padding:4px;border-radius:16px;background:var(--mist);--i:0}
.mbar__b{position:relative;z-index:1;height:42px;padding:0 .4em;border:0;border-radius:12px;background:transparent;color:var(--ink2);font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;transition:color .25s}
.mbar__b:hover{color:var(--ink)}
.mbar__b[aria-pressed="true"]{color:var(--ink)}
.mbar__b:focus-visible{outline-offset:-2px}
.mbar__thumb{position:absolute;z-index:0;left:4px;top:4px;bottom:4px;width:calc((100% - 8px)/4);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(25,31,40,.08),0 6px 16px -6px rgba(25,31,40,.2);transform:translateX(calc(var(--i)*100%));transition:transform .5s var(--spring)}
/* JS 가 켜지면 위쪽 바로가기 칩은 이 막대가 대신함 */
.js .pg-hero__meta:has(.jump){display:none}
.js .pg-hero{padding-bottom:clamp(20px,2.4vw,40px)}
/* ── 구역 전환 ───────────────────────────────────── */
main>section[hidden]{display:none!important}
@keyframes mx-in{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
.mx-in{animation:mx-in .6s var(--out) both;animation-delay:calc(var(--i,0)*80ms)}
.mx-out{opacity:0;transform:translate3d(0,10px,0);transition:opacity .16s ease,transform .16s ease}

/* ── 카드: 포인터 빛 · 기울기 · 화면 미리보기 ─────────── */
.mcard__vis .dev{transform-origin:50% 0;transition:scale .7s var(--out)}
.mcard:hover .mcard__vis .dev,.mcard:focus-within .mcard__vis .dev{scale:1.045}
.doccard::before{content:"";position:absolute;z-index:1;right:clamp(20px,2vw,32px);top:clamp(22px,2vw,32px);width:34px;height:44px;border-radius:7px;background:
  linear-gradient(#cfd6df,#cfd6df) 8px 13px/18px 3px no-repeat,
  linear-gradient(#cfd6df,#cfd6df) 8px 21px/14px 3px no-repeat,
  linear-gradient(var(--blue),var(--blue)) 8px 29px/10px 3px no-repeat,#fff;
  box-shadow:0 0 0 2px #e1e5ea,-5px 4px 0 -1px #fff,-5px 4px 0 1px #e1e5ea;transition:transform .5s var(--spring);transform-origin:50% 100%}
.doccard:hover::before,.doccard:focus-within::before{transform:translateY(-4px) rotate(5deg)}
@media (max-width:767px){.doccard::before{display:none}}
@media (prefers-reduced-motion:reduce){.mcard:hover .mcard__vis .dev{scale:none}.doccard:hover::before{transform:none}}

/* ── 자동 업데이트 그림 ───────────────────────────── */
.upd{display:grid;place-items:center;height:clamp(150px,13vw,200px);margin-bottom:.6em;border-radius:var(--r2);background:var(--mist);overflow:hidden}
.upd__win{width:min(72%,300px);border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(25,31,40,.08),0 18px 36px -16px rgba(25,31,40,.35);overflow:hidden}
.upd__bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;background:#eef0f3}
.upd__bar i{width:8px;height:8px;border-radius:50%;background:#cfd5dd}
.upd__bar b{margin-left:6px;color:var(--ink2);font-size:11px;font-weight:800}
.upd__body{position:relative;padding:14px 16px 16px;min-height:108px}
.upd__l{margin:0 0 9px;color:var(--ink);font-size:13px;font-weight:800;transition:opacity .3s}
.upd__prog{height:6px;border-radius:3px;background:#e5e8eb;overflow:hidden}
.upd__prog i{display:block;height:100%;border-radius:3px;background:var(--blue);transform-origin:0 50%;transform:scaleX(1)}
.upd__toast{position:absolute;left:12px;right:12px;bottom:12px;display:flex;justify-content:center;opacity:1;transform:none}
.upd__btn{padding:.55em 1.1em;border-radius:9px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;box-shadow:0 8px 16px -8px rgba(25,31,40,.6)}
.upd--mo .upd__ph{display:grid;justify-items:center;gap:14px;width:min(60%,210px);padding:18px 14px 16px;border-radius:26px;background:#fff;box-shadow:0 0 0 1px rgba(25,31,40,.08),0 18px 36px -16px rgba(25,31,40,.35)}
.upd__app{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--navy);color:var(--wave);font-size:15px;font-weight:800}
.upd__pill{position:relative;display:grid;place-items:center;width:100%;height:34px;border-radius:17px;background:#e8eeff;color:var(--blue);overflow:hidden}
.upd__fill{position:absolute;inset:0;background:var(--blue);transform-origin:0 50%;transform:scaleX(1)}
.upd__t1{position:relative;font-size:13px;font-weight:800;color:#fff}
.upd__ck{position:absolute;width:20px;height:20px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}

/* 보이는 동안만 재생 (.is-play) — 처음 상태 = 마지막 상태(동작 줄이기·JS 없음 때도 그대로 읽혀요) */
.js .upd.is-play .upd__prog i{animation:upd-prog 7s var(--out) infinite}
.js .upd.is-play .upd__toast{animation:upd-toast 7s var(--out) infinite}
.js .upd.is-play .upd__btn{animation:upd-press 7s var(--out) infinite}
.js .upd.is-play .upd__l{animation:upd-l 7s linear infinite}
.js .upd.is-play .upd__fill{animation:upd-fill 7s var(--out) infinite}
.js .upd.is-play .upd__t1{animation:upd-t1 7s linear infinite}
.js .upd.is-play .upd__ck{animation:upd-ck 7s var(--spring) infinite}
.js .upd.is-play .upd__pill{animation:upd-pill 7s var(--out) infinite}
@keyframes upd-prog{0%{transform:scaleX(0)}34%,100%{transform:scaleX(1)}}
@keyframes upd-toast{0%,36%{opacity:0;transform:translate3d(0,14px,0)}46%,88%{opacity:1;transform:none}96%,100%{opacity:0;transform:translate3d(0,6px,0)}}
@keyframes upd-press{0%,62%{transform:scale(1)}66%{transform:scale(.92)}72%,100%{transform:scale(1)}}
@keyframes upd-l{0%,36%{opacity:1}44%,92%{opacity:.35}98%,100%{opacity:1}}
@keyframes upd-fill{0%,12%{transform:scaleX(0)}58%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes upd-t1{0%,12%{color:var(--blue)}30%,86%{color:#fff}96%,100%{color:var(--blue)}}
@keyframes upd-ck{0%,60%{opacity:0;transform:scale(.3)}68%,86%{opacity:1;transform:scale(1)}94%,100%{opacity:0;transform:scale(.3)}}
@keyframes upd-pill{0%,8%{transform:scale(1)}10%{transform:scale(.96)}16%,100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .js .upd.is-play *{animation:none!important}
}