/* 지페 (jipe.html) 인터랙션 — 히어로(폰 화면)는 건드리지 않고, 기능 행 · 카드 · 시작 단계 · FAQ 에만 적용해요.
   JS가 없으면 바로가기 막대와 캐릭터 말풍선은 보이지 않고 모든 내용이 그대로 보여요. */

/* ── 기능 바로가기 (떠 있는 알약) ───────────────── */
.jfn{display:none}
.js .jfn{display:block;position:sticky;top:calc(var(--hdr) + 10px);z-index:30;margin-bottom:clamp(4px,1vw,16px);pointer-events:none;transition:top .4s var(--out)}
body:has(.hdr.is-away) .jfn{top:12px}
.js #features{padding-top:clamp(28px,3vw,56px)}
.jfn__in{position:relative;display:inline-flex;max-width:100%;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(25,31,40,.07),0 10px 28px -12px rgba(25,31,40,.28);pointer-events:auto;overflow-x:auto;scrollbar-width:none}
.jfn__in::-webkit-scrollbar{display:none}
.jfn a{position:relative;z-index:1;flex:none;padding:.62em 1.15em;border-radius:999px;color:var(--ink2);font-size:15px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;transition:color .25s}
.jfn a:hover{color:var(--ink)}
.jfn a.is-on{color:#fff}
.jfn__thumb{position:absolute;z-index:0;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:var(--ink);transform:translateX(0);opacity:0}
.jfn__thumb.is-ready{opacity:1;transition:transform .5s var(--spring),width .4s var(--out)}
/* 기능 행으로 이동한 뒤 화면 상자에 잠깐 파란 테두리 */
.js .feat[id]{scroll-margin-top:calc(70px*var(--zm,1))}
.feat__vis.is-flash::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:inset 0 0 0 4px var(--blue);opacity:0;pointer-events:none;animation:j-flash 1.3s ease-out 1}
@keyframes j-flash{0%{opacity:.9}100%{opacity:0}}
.feat__vis{transition:box-shadow .4s}

/* ── 화면 상자 · 카드 ───────────────────────────── */
.feat__vis.px-spot::after{border-radius:inherit}
.feat__vis.px-spot:hover{box-shadow:var(--sh2)}
.ticks li.px-pre::before{transform:rotate(40deg) scale(.2)}
.ticks li.px-pre.px-in::before{transform:rotate(40deg) scale(.8);transition:transform .6s var(--spring) calc(var(--i,0)*70ms + .15s)}

/* ── FAQ 캐릭터 ──────────────────────────────────── */
.jfq .wrap{position:relative}
.jfq__m{position:absolute;right:0;top:clamp(130px,11vw,190px);width:clamp(120px,10vw,170px);pointer-events:none;z-index:2}
.jfq__lean{display:block;transform-origin:50% 100%;transition:translate .6s var(--spring),rotate .6s var(--spring)}
.jfq__lean img{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 14px rgba(25,31,40,.18))}
.jfq__m.is-look .jfq__lean{translate:-8px 0;rotate:-3deg}
.jfq__m.is-hop .jfq__lean{animation:j-hop .7s var(--out) 1}
@keyframes j-hop{0%{transform:translateY(0)}30%{transform:translateY(-18px) rotate(-2deg)}58%{transform:translateY(0)}76%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.jfq__m.is-idle .jfq__lean{animation:j-float 5s ease-in-out infinite}
@keyframes j-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.jfq__bubble{position:absolute;right:0;bottom:calc(100% + 4px);min-width:9.5em;margin:0;padding:.65em 1em;border-radius:16px 16px 4px 16px;background:var(--ink);color:#fff;font-size:15px;font-weight:800;line-height:1.35;text-align:center;opacity:0;transform:translate3d(0,8px,0) scale(.85);transform-origin:100% 100%;transition:opacity .3s,transform .5s var(--spring)}
.jfq__m.is-say .jfq__bubble{opacity:1;transform:none}
@media (max-width:1279px){
  .jfq__m{position:relative;top:auto;right:auto;width:110px;margin:34px auto 6px}
  .jfq__bubble{left:50%;right:auto;translate:-50% 0;transform-origin:50% 100%;border-radius:16px 16px 16px 4px;white-space:nowrap}
}

@media (prefers-reduced-motion:reduce){
  .jfq__m.is-hop .jfq__lean,.jfq__m.is-idle .jfq__lean,.feat__vis.is-flash::before{animation:none}
  .jfq__m.is-look .jfq__lean{translate:none;rotate:none}
}