/* 움직이는 데모 */
.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dcard{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 14px 16px}
.dcard b{display:block;margin:12px 0 2px;font-size:15px}.dcard p{margin:0;color:var(--sub);font-size:13px}
.stage{display:grid;grid-template-columns:1fr 1.15fr;gap:10px;align-items:center}
.mpad{position:relative;aspect-ratio:1.5;border-radius:10px;background:linear-gradient(180deg,var(--pad1),var(--pad2));border:1px solid var(--line);overflow:hidden}
.mscr{position:relative;aspect-ratio:1.6;border-radius:8px;background:#20242c;border:3px solid #3a3f4a;overflow:hidden}
.dot{position:absolute;width:16px;height:20px;border-radius:50%;background:var(--accent-soft);border:2px solid var(--accent);transform:translate(-50%,-50%);opacity:0}
.win{position:absolute;background:#f1ece2;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.win:before{content:"";position:absolute;left:3px;top:3px;width:14px;height:4px;border-radius:2px;background:radial-gradient(circle,#ff5f57 1.5px,transparent 2px) 0 0/5px 4px repeat-x}
@keyframes tapA{0%,18%{opacity:0;transform:translate(-50%,-80%)}24%,34%{opacity:1;transform:translate(-50%,-50%)}42%,100%{opacity:0}}
@keyframes tap2{0%,12%{opacity:0}16%,21%{opacity:1}24%,27%{opacity:0}30%,35%{opacity:1}40%,100%{opacity:0}}
.k-corner .dot,.k-top .dot{animation:tapA 3.4s infinite}
.k-corner .dot{left:12%;top:16%} .k-top .dot{left:50%;top:14%}
.k-corner .win,.k-top .win,.k-double .win{left:25%;top:22%;width:50%;height:56%;animation:var(--anim) 3.4s infinite}
.k-corner{--anim:toLeft}.k-top{--anim:toFill}.k-double{--anim:toQuarter}
@keyframes toLeft{0%,36%{left:25%;top:22%;width:50%;height:56%}46%,88%{left:0;top:0;width:50%;height:100%}100%{left:25%;top:22%;width:50%;height:56%}}
@keyframes toFill{0%,36%{left:25%;top:22%;width:50%;height:56%}46%,88%{left:0;top:0;width:100%;height:100%}100%{left:25%;top:22%;width:50%;height:56%}}
@keyframes toQuarter{0%,38%{left:25%;top:22%;width:50%;height:56%}48%,88%{left:0;top:0;width:50%;height:50%}100%{left:25%;top:22%;width:50%;height:56%}}
.k-double .dot{left:12%;top:16%;animation:tap2 3.4s infinite}
.k-slider .dot{left:93%;animation:slide 3.4s infinite}
@keyframes slide{0%,8%{top:85%;opacity:0}14%{top:85%;opacity:1}60%{top:20%;opacity:1}70%,100%{top:20%;opacity:0}}
.vol{position:absolute;left:50%;top:50%;width:62%;height:22%;transform:translate(-50%,-50%);background:rgba(255,255,255,.14);border-radius:6px;animation:hud 3.4s infinite}
.vol i{position:absolute;left:8%;top:40%;height:20%;width:0;background:#fff;border-radius:3px;animation:level 3.4s infinite}
@keyframes level{0%,14%{width:12%}60%,100%{width:84%}}
@keyframes hud{0%,10%{opacity:0}16%,70%{opacity:1}80%,100%{opacity:0}}
.k-three .dot{top:50%;animation:tapA 3.4s infinite}
.k-three .dot:nth-child(1){left:35%}.k-three .dot:nth-child(2){left:50%}.k-three .dot:nth-child(3){left:65%}
.tabs{position:absolute;left:0;right:0;top:0;height:22%;background:#2c313b;display:flex;gap:3px;padding:3px 4px}
.tabs i{width:26%;border-radius:3px 3px 0 0;background:#f1ece2}
.tabs i.new{opacity:0;animation:newtab 3.4s infinite}
@keyframes newtab{0%,38%{opacity:0;transform:translateY(-100%)}46%,88%{opacity:1;transform:none}100%{opacity:0}}
.k-swipe .dot{animation:swipe 3.4s infinite}
@keyframes swipe{0%,8%{left:90%;top:86%;opacity:0}14%{left:90%;top:86%;opacity:1}40%{left:60%;top:48%;opacity:1}48%,100%{left:60%;top:48%;opacity:0}}
.note{position:absolute;right:6%;bottom:8%;width:40%;height:52%;background:#ffd84d;border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.4);opacity:0;animation:note 3.4s infinite}
.note:after{content:"";position:absolute;left:12%;right:12%;top:22%;height:44%;background:repeating-linear-gradient(#b38f00 0 2px,transparent 2px 7px)}
@keyframes note{0%,40%{opacity:0;transform:translate(30%,30%) scale(.6)}50%,88%{opacity:1;transform:none}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.demos *{animation:none!important;opacity:1!important}}

/* 쉬고 있는 손가락 (계속 보임) */
.dot.rest{opacity:1!important;animation:none!important}
/* 두 손가락 대고 톡 → 다음 탭 */
.k-twotab .dot.rest{top:52%} .k-twotab .dot.rest:nth-child(1){left:48%} .k-twotab .dot.rest:nth-child(2){left:62%}
.k-twotab .dot.tapper{left:76%;top:46%;animation:tapA 3.4s infinite}
.tabs i.on{background:#f1ece2}.tabs i{background:#5b616d}
.k-twotab .tabs i:nth-child(1){animation:tabOff 3.4s infinite}.k-twotab .tabs i:nth-child(2){animation:tabOn 3.4s infinite}
@keyframes tabOff{0%,36%{background:#f1ece2}44%,88%{background:#5b616d}100%{background:#f1ece2}}
@keyframes tabOn{0%,36%{background:#5b616d}44%,88%{background:#f1ece2}100%{background:#5b616d}}
/* 네 손가락 탭 → 탭 닫기 */
.k-four .dot{top:50%;animation:tapA 3.4s infinite}
.k-four .dot:nth-child(1){left:28%}.k-four .dot:nth-child(2){left:42%}.k-four .dot:nth-child(3){left:56%}.k-four .dot:nth-child(4){left:70%}
.k-four .tabs i.bye{background:#f1ece2;animation:bye 3.4s infinite}
@keyframes bye{0%,36%{opacity:1;transform:none}46%,88%{opacity:0;transform:translateY(-100%)}100%{opacity:1}}
/* 다섯 손가락 탭 → Mission Control */
.k-five .dot{top:52%;animation:tapA 3.4s infinite}
.k-five .dot:nth-child(1){left:20%;top:62%}.k-five .dot:nth-child(2){left:34%}.k-five .dot:nth-child(3){left:48%;top:46%}.k-five .dot:nth-child(4){left:62%}.k-five .dot:nth-child(5){left:76%}
.k-five .win{animation:mc 3.4s infinite}
.k-five .win:nth-child(1){left:10%;top:15%;width:55%;height:55%;--x:-8%;--y:-4%}
.k-five .win:nth-child(2){left:35%;top:35%;width:55%;height:55%;--x:8%;--y:6%}
@keyframes mc{0%,36%{transform:none}46%,88%{transform:translate(var(--x),var(--y)) scale(.62)}100%{transform:none}}
.k-five .mscr{background:#15181e}
/* 왼쪽 끝 슬라이더 → 밝기 */
.k-bright .dot{left:7%;animation:slide 3.4s infinite}
.dim{position:absolute;inset:0;background:#000;animation:dim 3.4s infinite}
@keyframes dim{0%,14%{opacity:.62}60%,88%{opacity:0}100%{opacity:.62}}
.sun{position:absolute;left:50%;top:50%;width:30%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(#ffd84d 38%,transparent 40%),repeating-conic-gradient(#ffd84d 0 8deg,transparent 8deg 45deg);-webkit-mask:radial-gradient(circle,#000 70%,transparent 71%);mask:radial-gradient(circle,#000 70%,transparent 71%)}
/* 아래쪽 끝 좌우 → 타임라인 가로 스크롤 (Pro) */
.k-timeline .dot{top:90%;animation:slideX 3.4s infinite}
@keyframes slideX{0%,8%{left:20%;opacity:0}14%{left:20%;opacity:1}60%{left:80%;opacity:1}70%,100%{left:80%;opacity:0}}
.tl{position:absolute;left:0;top:55%;width:220%;height:30%;display:flex;gap:4%;animation:tl 3.4s infinite}
.tl i{flex:1;border-radius:3px;background:#7aa2f7}.tl i:nth-child(2n){background:#e0af68}.tl i:nth-child(3n){background:#9ece6a}
.tl:before{content:"";position:absolute}
.head{position:absolute;left:45%;top:45%;width:2px;height:50%;background:#ff5f57}
@keyframes tl{0%,14%{transform:none}60%,100%{transform:translateX(-40%)}}
/* 스와이프 앱 전환 (Pro) */
.k-switch .dot.rest{left:30%;top:58%}
.k-switch .dot.mv{top:44%;animation:sw 3.4s infinite}
.k-switch .dot.mv:nth-child(2){--o:0%}.k-switch .dot.mv:nth-child(3){--o:14%}
@keyframes sw{0%,10%{left:calc(50% + var(--o));opacity:0}16%{left:calc(50% + var(--o));opacity:1}60%{left:calc(72% + var(--o));opacity:1}68%,100%{left:calc(72% + var(--o));opacity:0}}
.sw{position:absolute;left:12%;right:12%;top:36%;height:28%;border-radius:6px;background:rgba(255,255,255,.14);display:flex;gap:8%;padding:4% 8%;animation:hud 3.4s infinite}
.sw i{flex:1;border-radius:4px;background:#5b616d}
.sw i:nth-child(1){animation:tabOff 3.4s infinite}.sw i:nth-child(2){animation:tabOn 3.4s infinite}
/* 세 손가락 투탭 → 스크린샷 (Pro) */
.k-shot .dot{top:50%;animation:tap2 3.4s infinite}
.k-shot .dot:nth-child(1){left:35%}.k-shot .dot:nth-child(2){left:50%}.k-shot .dot:nth-child(3){left:65%}
.sel{position:absolute;left:22%;top:24%;width:0;height:0;border:1.5px dashed #fff;background:rgba(255,255,255,.12);animation:sel 3.4s infinite}
@keyframes sel{0%,40%{width:0;height:0;opacity:0}44%{opacity:1}64%,80%{width:52%;height:48%;opacity:1}86%,100%{opacity:0}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash 3.4s infinite}
@keyframes flash{0%,80%{opacity:0}83%{opacity:.8}92%,100%{opacity:0}}
/* 위쪽 가운데 투탭 → 창을 가운데로 (Pro) */
.k-center .dot{left:50%;top:14%;animation:tap2 3.4s infinite}
.k-center .win{animation:toCenter 3.4s infinite}
@keyframes toCenter{0%,38%{left:0;top:0;width:100%;height:100%}48%,88%{left:17%;top:12%;width:66%;height:76%}100%{left:0;top:0;width:100%;height:100%}}
/* 대고 톡 → 뒤로 (설명서용 작은 버전) */
.k-back .dot.rest{left:56%;top:54%}
.k-back .dot.tapper{left:38%;top:48%;animation:tapA 3.4s infinite}
.page{position:absolute;inset:8% 10%;border-radius:3px;background:#f1ece2;animation:pageBack 3.4s infinite}
.page:after{content:"";position:absolute;left:10%;right:10%;top:18%;height:50%;background:repeating-linear-gradient(#b9b2a5 0 2px,transparent 2px 8px)}
@keyframes pageBack{0%,36%{transform:none;opacity:1}44%{transform:translateX(40%);opacity:0}46%{transform:translateX(-40%);opacity:0}54%,100%{transform:none;opacity:1}}
/* 제목 줄에서 두 손가락 쓸기 → 창 오른쪽 반 (Pro) */
.k-title .dot{top:44%;animation:twoRight 3.4s infinite}
.k-title .dot:nth-child(1){--o:0%}.k-title .dot:nth-child(2){--o:12%}
@keyframes twoRight{0%,8%{left:calc(30% + var(--o));opacity:0}14%{left:calc(30% + var(--o));opacity:1}40%{left:calc(56% + var(--o));opacity:1}48%,100%{left:calc(56% + var(--o));opacity:0}}
.k-title .win{left:22%;top:18%;width:52%;height:62%;animation:toRight 3.4s infinite}
.k-title .win:after{content:"";position:absolute;left:0;right:0;top:0;height:14%;background:rgba(255,138,61,.55);border-radius:3px 3px 0 0;animation:hud 3.4s infinite}
.k-title .ptr{position:absolute;left:46%;top:24%;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid #fff;transform:rotate(-25deg);animation:ptr 3.4s infinite}
@keyframes toRight{0%,40%{left:22%;top:18%;width:52%;height:62%}50%,88%{left:50%;top:0;width:50%;height:100%}100%{left:22%;top:18%;width:52%;height:62%}}
@keyframes ptr{0%,40%{left:46%;top:24%}50%,88%{left:72%;top:6%}100%{left:46%;top:24%}}

/* 원형 메뉴: 세 손가락 대고 → 원이 뜨고 → 오른쪽 위로 밀면 그 칸이 켜지고 → 앱 창 */
.k-radial .dot{top:58%;animation:rhold 3.4s infinite}
.k-radial .dot:nth-child(1){left:36%}.k-radial .dot:nth-child(2){left:50%}.k-radial .dot:nth-child(3){left:64%}
@keyframes rhold{0%,6%{opacity:0;margin:0}12%,38%{opacity:1;margin:0}54%{opacity:1;margin:-26px 0 0 18px}62%,100%{opacity:0;margin:-26px 0 0 18px}}
.rmenu{position:absolute;left:50%;top:50%;width:64%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.8);border-radius:50%;
  background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);backdrop-filter:blur(3px);opacity:0;animation:rring 3.4s infinite}
.rmenu i{position:absolute;width:15%;aspect-ratio:1;border-radius:4px;background:rgba(255,255,255,.55);transform:translate(-50%,-50%)}
.rmenu i:nth-child(1){left:50%;top:14%}.rmenu i:nth-child(2){left:75%;top:25%}.rmenu i:nth-child(3){left:86%;top:50%}.rmenu i:nth-child(4){left:75%;top:75%}
.rmenu i:nth-child(5){left:50%;top:86%}.rmenu i:nth-child(6){left:25%;top:75%}.rmenu i:nth-child(7){left:14%;top:50%}.rmenu i:nth-child(8){left:25%;top:25%}
.rmenu i.rpick{animation:rsel 3.4s infinite}
.rmenu b{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.35);transform:translate(-50%,-50%)}
@keyframes rring{0%,26%{opacity:0;transform:translate(-50%,-50%) scale(.8)}32%,58%{opacity:1;transform:translate(-50%,-50%) scale(1)}64%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes rsel{0%,40%{background:rgba(255,255,255,.55);transform:translate(-50%,-50%)}48%,58%{background:var(--accent);transform:translate(-50%,-50%) scale(1.35);box-shadow:0 0 10px var(--accent)}64%,100%{background:rgba(255,255,255,.55);transform:translate(-50%,-50%)}}
.rwin{left:22%;top:20%;width:56%;height:60%;opacity:0;animation:rwin 3.4s infinite}
@keyframes rwin{0%,60%{opacity:0;transform:scale(.7)}68%,90%{opacity:1;transform:none}100%{opacity:0}}