/* 로딩 화면 — 토뭉이 윙크 / 토심이 등장 / 둘이 하트 중 무작위(loader.js). 시안 토큰 색 사용. */
#tl-loader{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#5B5BD6 0%,#7B7BE6 60%,#F2F3F7 100%);transition:opacity .35s ease}
#tl-loader.hide{opacity:0;pointer-events:none}
#tl-loader .stage{position:relative;height:180px;display:flex;align-items:flex-end;justify-content:center;gap:4px}
#tl-loader .ch{position:relative;width:180px;height:180px}
#tl-loader .ch img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#tl-loader .ch .wink{opacity:0}
#tl-loader .title{margin-top:18px;font:900 22px -apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#fff;letter-spacing:-.3px}
#tl-loader .msg{margin-top:6px;font:600 13px -apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:rgba(255,255,255,.8)}
#tl-loader .dots i{display:inline-block;width:6px;height:6px;margin:10px 3px 0;border-radius:50%;background:#fff;opacity:.35;animation:tl-dot 1.2s infinite}
#tl-loader .dots i:nth-child(2){animation-delay:.2s}
#tl-loader .dots i:nth-child(3){animation-delay:.4s}
#tl-loader .heart{position:absolute;left:50%;top:6px;width:44px;margin-left:-22px;image-rendering:pixelated;opacity:0;animation:tl-heart 1.8s .5s infinite}

/* 1) 토뭉이: 통통 튀다가 윙크 */
#tl-loader.s-wink .ch{animation:tl-bounce 1.1s ease-in-out infinite;transform-origin:50% 100%}
#tl-loader.s-wink .wink{animation:tl-wink 2.2s .6s infinite}
#tl-loader.s-wink .open{animation:tl-wink-off 2.2s .6s infinite}

/* 2) 토심이: 아래에서 뿅 등장 → 살랑 → 윙크 */
#tl-loader.s-pop .ch{animation:tl-pop .7s cubic-bezier(.3,1.6,.5,1) both, tl-sway 1.6s .8s ease-in-out infinite;transform-origin:50% 100%}
#tl-loader.s-pop .wink{animation:tl-wink 2.4s 1s infinite}
#tl-loader.s-pop .open{animation:tl-wink-off 2.4s 1s infinite}

/* 3) 둘이 함께: 번갈아 통통 + 하트 */
#tl-loader.s-duo .ch{width:140px;height:140px;animation:tl-bounce 1.2s ease-in-out infinite;transform-origin:50% 100%}
#tl-loader.s-duo .ch:last-of-type{animation-delay:.6s}
#tl-loader.s-duo .ch:first-of-type .wink{animation:tl-wink 2.4s 1.2s infinite}
#tl-loader.s-duo .ch:first-of-type .open{animation:tl-wink-off 2.4s 1.2s infinite}
#tl-loader.s-duo .ch:last-of-type .wink{animation:tl-wink 2.4s .2s infinite}
#tl-loader.s-duo .ch:last-of-type .open{animation:tl-wink-off 2.4s .2s infinite}

@keyframes tl-bounce{0%,100%{transform:translateY(0) scale(1,1)}40%{transform:translateY(-16px) scale(.96,1.04)}55%{transform:translateY(0) scale(1.06,.94)}70%{transform:translateY(0) scale(1,1)}}
@keyframes tl-pop{0%{transform:translateY(120px) scale(.6);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}
@keyframes tl-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes tl-wink{0%,62%,78%,100%{opacity:0}66%,74%{opacity:1}}
@keyframes tl-wink-off{0%,62%,78%,100%{opacity:1}66%,74%{opacity:0}}
@keyframes tl-heart{0%{opacity:0;transform:translateY(10px) scale(.4)}25%{opacity:1;transform:translateY(-6px) scale(1.15)}60%{opacity:1;transform:translateY(-14px) scale(1)}100%{opacity:0;transform:translateY(-30px) scale(.8)}}
@keyframes tl-dot{0%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){#tl-loader *{animation:none!important}}