.home-shortcuts {display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:12px;width:100%;max-width:1120px;margin:0 auto;padding:18px 24px 20px;font-family:var(--up-font-body)}
.home-shortcuts .home-shortcut {display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;text-decoration:none;color:var(--up-text);border-radius:18px;padding:4px 0}
.home-shortcuts .shortcut-art {position:relative;display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:24px;background:#fff;border:1px solid transparent;transition:background .2s,border-color .2s,transform .2s;overflow:hidden}
.home-shortcuts .shortcut-art .si {display:block;width:64px;height:64px;pointer-events:none}
.home-shortcuts .shortcut-label {font-size:13px;font-weight:600;line-height:1.5;text-align:center;white-space:nowrap;letter-spacing:-.035em}
.home-shortcuts .home-shortcut:hover {color:var(--up-brand)}
.home-shortcuts .home-shortcut:hover .shortcut-art {background:#fff;border-color:transparent;transform:translateY(-3px)}
.home-shortcuts .home-shortcut:focus-visible {outline:2px solid var(--up-brand);outline-offset:5px}
@media(max-width:900px){.home-shortcuts {grid-template-columns:repeat(5,minmax(0,1fr));max-width:620px;gap:18px 12px;padding:22px 20px}.home-shortcuts .shortcut-art {width:80px;height:80px;border-radius:22px}.home-shortcuts .shortcut-art .si {width:60px;height:60px}}
@media(max-width:480px){.home-shortcuts {gap:16px 8px;padding:20px 12px}.home-shortcuts .shortcut-art {width:66px;height:66px;border-radius:19px}.home-shortcuts .shortcut-art .si {width:54px;height:54px}.home-shortcuts .home-shortcut {gap:8px}.home-shortcuts .shortcut-label {font-size:11px}}

.home-shortcuts .shortcut-new {position:absolute;z-index:1;top:5px;right:5px;font-family:var(--up-font-body);font-size:8px;font-weight:800;letter-spacing:.03em;border-radius:5px;padding:2px 4px;color:#fff;background:var(--up-brand)}
.home-shortcuts {max-width:1120px;padding:24px 24px 18px;gap:14px}
.home-shortcuts .shortcut-art {width:64px;height:64px;background:transparent;border:0;border-radius:10px;overflow:visible}
.home-shortcuts .home-shortcut {gap:12px;padding:0}
.home-shortcuts .shortcut-label {font-size:12px;font-weight:500;letter-spacing:-.025em;color:var(--up-text)}
.home-shortcuts .home-shortcut:hover .shortcut-art {background:transparent;transform:translateY(-2px)}
.home-shortcuts .shortcut-new {top:-4px;right:-5px}
@media(max-width:900px){.home-shortcuts {padding:20px 16px;gap:20px 12px;max-width:600px}.home-shortcuts .shortcut-art,.home-shortcuts .shortcut-art .si {width:60px;height:60px}}
@media(max-width:480px){.home-shortcuts {gap:16px 4px;padding:18px 10px}.home-shortcuts .shortcut-art,.home-shortcuts .shortcut-art .si {width:52px;height:52px}.home-shortcuts .shortcut-label {font-size:11px;letter-spacing:-.05em}.home-shortcuts .home-shortcut {gap:8px}}
@media(max-width:360px){.home-shortcuts .shortcut-art,.home-shortcuts .shortcut-art .si {width:46px;height:46px}.home-shortcuts .shortcut-label {font-size:10px}}

/* ── Hover motion graphics (인라인 SVG: views/main/shortcutIcon.ejs) ── */
.home-shortcuts {--si-spring:cubic-bezier(.34,1.56,.64,1);--si-ease:cubic-bezier(.22,1,.36,1)}
.home-shortcuts .shortcut-art {transition:transform .45s var(--si-spring)}
.home-shortcuts .shortcut-art .si {overflow:visible;transition:filter .35s}
.home-shortcuts .si-glow {opacity:0;transition:opacity .35s}
.home-shortcuts .si :is(g,path,circle,rect) {transform-box:fill-box;transform-origin:center}
.home-shortcuts .shortcut-label {transition:color .25s}
.home-shortcuts .home-shortcut:is(:hover,:focus-visible) .shortcut-art {transform:translateY(-4px)}
.home-shortcuts .home-shortcut:is(:hover,:focus-visible) .si-glow {opacity:1}
.home-shortcuts .home-shortcut:is(:hover,:focus-visible) .shortcut-label {color:var(--up-brand)}
.home-shortcuts .home-shortcut:is(:hover,:focus-visible) .shortcut-new {animation:si-new .6s var(--si-spring)}
@keyframes si-new {0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-6deg)}100%{transform:scale(1)}}

/* 무료강의 일정: 링이 튀고 체크가 다시 그려짐 */
.si-schedule .si-check {stroke-dasharray:1;stroke-dashoffset:0}
.home-shortcut:is(:hover,:focus-visible) .si-schedule .si-cal {animation:si-cal-tilt .7s var(--si-spring)}
.home-shortcut:is(:hover,:focus-visible) .si-schedule .si-ring-l {animation:si-hop .5s var(--si-spring)}
.home-shortcut:is(:hover,:focus-visible) .si-schedule .si-ring-r {animation:si-hop .5s .08s var(--si-spring) backwards}
.home-shortcut:is(:hover,:focus-visible) .si-schedule .si-check {animation:si-draw .55s .18s var(--si-ease) backwards}
@keyframes si-cal-tilt {0%{transform:rotate(0)}35%{transform:rotate(-7deg) scale(1.04)}100%{transform:rotate(0)}}
@keyframes si-hop {0%,100%{transform:translateY(0)}45%{transform:translateY(-4px)}}
@keyframes si-draw {from{stroke-dashoffset:1}to{stroke-dashoffset:0}}

/* 프리미엄 강의: 왕관이 들리며 보석·반짝이 */
.si-premium .si-spark {transform:scale(0);opacity:0}
.home-shortcut:is(:hover,:focus-visible) .si-premium .si-crown {animation:si-crown .8s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-premium .si-jewel {animation:si-jewel .8s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-premium .si-spark-1 {animation:si-twinkle 1.6s .15s ease-in-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-premium .si-spark-2 {animation:si-twinkle 1.6s .55s ease-in-out infinite}
@keyframes si-crown {0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-5px) rotate(-8deg)}70%{transform:translateY(-2px) rotate(4deg)}100%{transform:translateY(-2px) rotate(0)}}
@keyframes si-jewel {0%{transform:translateY(0) scale(1)}40%{transform:translateY(-8px) scale(1.4)}100%{transform:translateY(-3px) scale(1.15)}}
@keyframes si-twinkle {0%,100%{transform:scale(0) rotate(0);opacity:0}50%{transform:scale(1) rotate(90deg);opacity:1}}

/* 전자책·VOD: 책이 기울고 플레이어가 튀어나옴 */
.home-shortcuts .si-library .si-book {transform-origin:0% 100%}
.home-shortcut:is(:hover,:focus-visible) .si-library .si-book {animation:si-book .7s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-library .si-player {animation:si-player .6s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-library .si-play {animation:si-pulse 1.1s .5s ease-in-out infinite}
@keyframes si-book {0%{transform:rotate(0)}50%{transform:rotate(-9deg)}100%{transform:rotate(-5deg)}}
@keyframes si-player {0%{transform:translate(0,0) scale(1)}60%{transform:translate(3px,-3px) scale(1.14)}100%{transform:translate(2px,-2px) scale(1.08)}}
@keyframes si-pulse {0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}

/* 강사지원: 고개를 끄덕이고 플러스가 회전 */
.home-shortcut:is(:hover,:focus-visible) .si-instructor .si-head {animation:si-nod .8s var(--si-ease)}
.home-shortcut:is(:hover,:focus-visible) .si-instructor .si-person {animation:si-hop .6s var(--si-spring)}
.home-shortcut:is(:hover,:focus-visible) .si-instructor .si-plus {animation:si-spin-pop .7s var(--si-spring) forwards}
@keyframes si-nod {0%,100%{transform:translateY(0)}25%{transform:translateY(2px)}50%{transform:translateY(-2px)}75%{transform:translateY(1px)}}
@keyframes si-spin-pop {0%{transform:rotate(0) scale(1)}60%{transform:rotate(200deg) scale(1.22)}100%{transform:rotate(180deg) scale(1.1)}}

/* 수강후기: 별이 회전하며 커지고 반짝임 */
.si-reviews .si-spark {transform:scale(0);opacity:0}
.home-shortcut:is(:hover,:focus-visible) .si-reviews .si-star {animation:si-star .9s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-reviews .si-bubble {animation:si-wiggle .6s var(--si-ease)}
.home-shortcut:is(:hover,:focus-visible) .si-reviews .si-spark-1 {animation:si-burst 1.4s .2s ease-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-reviews .si-spark-2 {animation:si-burst 1.4s .45s ease-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-reviews .si-spark-3 {animation:si-burst 1.4s .7s ease-out infinite}
@keyframes si-star {0%{transform:rotate(0) scale(1)}60%{transform:rotate(380deg) scale(1.3)}100%{transform:rotate(360deg) scale(1.15)}}
@keyframes si-wiggle {0%,100%{transform:rotate(0)}30%{transform:rotate(-3deg)}65%{transform:rotate(2deg)}}
@keyframes si-burst {0%{transform:scale(0);opacity:0}30%{transform:scale(1.4);opacity:1}100%{transform:scale(0);opacity:0}}

/* 커뮤니티: 말풍선이 벌어지고 입력중 점이 출렁임 */
.home-shortcut:is(:hover,:focus-visible) .si-community .si-bubble-front {animation:si-front .6s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-community .si-bubble-back {animation:si-back .6s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-community .si-dot {animation:si-typing 1s ease-in-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-community .si-dot-2 {animation-delay:.15s}
.home-shortcut:is(:hover,:focus-visible) .si-community .si-dot-3 {animation-delay:.3s}
@keyframes si-front {to{transform:translate(-2px,-2px) rotate(-4deg)}}
@keyframes si-back {to{transform:translate(2px,2px) rotate(3deg)}}
@keyframes si-typing {0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}

/* 업스킬 유튜브: 슬레이트가 '탁' 닫히고 재생 */
.home-shortcuts .si-youtube .si-clapper {transform-box:view-box;transform-origin:18px 27px}
.home-shortcut:is(:hover,:focus-visible) .si-youtube .si-clapper {animation:si-clap .9s var(--si-ease)}
.home-shortcut:is(:hover,:focus-visible) .si-youtube .si-board {animation:si-thud .9s var(--si-ease)}
.home-shortcut:is(:hover,:focus-visible) .si-youtube .si-play {animation:si-pulse 1.1s .8s ease-in-out infinite}
@keyframes si-clap {0%{transform:rotate(0)}25%{transform:rotate(-22deg)}45%{transform:rotate(2deg)}55%{transform:rotate(-12deg)}75%{transform:rotate(1deg)}100%{transform:rotate(0)}}
@keyframes si-thud {0%,40%,60%,100%{transform:translateY(0)}47%,78%{transform:translateY(1.5px)}}

/* IT 클래스: 코드 괄호가 벌어지고 LED 점멸 */
.home-shortcut:is(:hover,:focus-visible) .si-it .si-window {animation:si-hop .55s var(--si-spring)}
.home-shortcut:is(:hover,:focus-visible) .si-it .si-code-l {animation:si-code-l .6s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-it .si-code-r {animation:si-code-r .6s var(--si-spring) forwards}
.home-shortcut:is(:hover,:focus-visible) .si-it .si-code-slash {animation:si-blink 1s .5s steps(1) infinite}
.home-shortcut:is(:hover,:focus-visible) .si-it .si-led-1 {animation:si-blink 1.2s ease-in-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-it .si-led-2 {animation:si-blink 1.2s .3s ease-in-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-it .si-led-3 {animation:si-blink 1.2s .6s ease-in-out infinite}
@keyframes si-code-l {to{transform:translateX(-3px)}}
@keyframes si-code-r {to{transform:translateX(3px)}}
@keyframes si-blink {0%,100%{opacity:1}50%{opacity:.25}}

/* 바이브코딩: 코드가 타이핑되고 AI 스파클이 회전 */
.si-vibe .si-line {stroke-dasharray:1;stroke-dashoffset:0}
.home-shortcut:is(:hover,:focus-visible) .si-vibe .si-editor {animation:si-hop .55s var(--si-spring)}
.home-shortcut:is(:hover,:focus-visible) .si-vibe .si-line-1 {animation:si-draw .35s .1s var(--si-ease) backwards}
.home-shortcut:is(:hover,:focus-visible) .si-vibe .si-line-2 {animation:si-draw .35s .4s var(--si-ease) backwards}
.home-shortcut:is(:hover,:focus-visible) .si-vibe .si-line-3 {animation:si-draw .3s .7s var(--si-ease) backwards}
.home-shortcut:is(:hover,:focus-visible) .si-vibe .si-cursor {animation:si-cursor-move .3s .7s var(--si-ease) backwards,si-blink .9s 1s steps(1) infinite}
.home-shortcut:is(:hover,:focus-visible) .si-vibe .si-sparkle {animation:si-sparkle 1.6s var(--si-spring) infinite}
.home-shortcut:is(:hover,:focus-visible) .si-vibe .si-sparkle-mini {animation:si-twinkle 1.2s .3s ease-in-out infinite}
@keyframes si-cursor-move {from{transform:translateX(-8px)}to{transform:translateX(0)}}
@keyframes si-sparkle {0%{transform:rotate(0) scale(1)}35%{transform:rotate(90deg) scale(1.25)}60%{transform:rotate(90deg) scale(.95)}100%{transform:rotate(90deg) scale(1)}}

/* AI 직원: 안테나 신호 · 눈 깜빡 · 말하기 */
.home-shortcuts .si-agent .si-wave, .home-hero .si-agent .si-wave {transform-box:view-box;transform-origin:32px 14px;opacity:0}
.home-shortcut:is(:hover,:focus-visible) .si-agent .si-bot {animation:si-bot .9s var(--si-spring)}
.home-shortcut:is(:hover,:focus-visible) .si-agent .si-antenna {animation:si-pulse .8s ease-in-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-agent .si-wave {animation:si-wave 1.2s ease-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-agent .si-eye {animation:si-eye 2.4s .3s ease-in-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-agent .si-mouth {animation:si-talk .5s .2s ease-in-out 3}
.home-shortcut:is(:hover,:focus-visible) .si-agent .si-ear-l {animation:si-ear 1s ease-in-out infinite}
.home-shortcut:is(:hover,:focus-visible) .si-agent .si-ear-r {animation:si-ear 1s .5s ease-in-out infinite}
@keyframes si-bot {0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-3px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes si-wave {0%{transform:scale(.6);opacity:0}30%{opacity:1}100%{transform:scale(1.5);opacity:0}}
@keyframes si-eye {0%,8%,16%,100%{transform:scaleY(1)}4%,12%{transform:scaleY(.1)}}
@keyframes si-talk {0%,100%{transform:scaleX(1)}50%{transform:scale(.55,2.2)}}
@keyframes si-ear {0%,100%{transform:scaleY(1)}50%{transform:scaleY(.6)}}

/* 업스킬: 화살표가 위로 솟구침 */
.home-shortcut:is(:hover,:focus-visible) .si-about .si-arrow {animation:si-shoot .8s var(--si-ease)}
.home-shortcut:is(:hover,:focus-visible) .si-about .si-u {animation:si-hop .6s .15s var(--si-spring) backwards}
@keyframes si-shoot {0%{transform:translate(0,0)}35%{transform:translate(7px,-7px);opacity:0}36%{transform:translate(-7px,7px);opacity:0}100%{transform:translate(0,0);opacity:1}}

@media(hover:none){.home-shortcuts .home-shortcut:hover .shortcut-art {transform:none}}
@media(prefers-reduced-motion:reduce){.home-shortcuts *,.home-shortcuts *::after {transition:none!important;animation:none!important}}