/* WISHORA 움직임 — 둘째 창 "움직임 2안(부드럽고 차분하게)" 보드(V6Motion)에서 추출. 2026-10-20
   보드는 보여 주려고 반복 재생하지만, 운영에서는 값이 바뀌거나 누를 때 한 번만 움직인다.
   구현 규칙: JS가 바뀐 요소에 클래스를 붙이고 animationend에 뗀다. 반복(infinite)은 6·7번(뼈대·장중 점)만. */

:root{
  --wz-m-press:180ms; --wz-m-move:280ms; --wz-m-open:420ms; --wz-m-sheet:560ms;
  --wz-e-in:cubic-bezier(.22,1,.36,1);    /* 들어오는 것: 빨리 출발, 아주 천천히 멈춤 */
  --wz-e-move:cubic-bezier(.65,0,.35,1);  /* 옮겨 가는 것: 천천히 출발, 천천히 멈춤 */
  --wz-e-sheet:cubic-bezier(.32,.72,0,1); /* 폰 시트: iOS 곡선 */
}

/* 1. 가격·손익이 새로 들어올 때 — 바뀐 숫자 자리만 0.42초 위로 밀려 바뀌고, 칸 뒤 옅은 빛이 1.6초에 스러짐. 중간값 없음(카운트업 금지). */
.wz-chg-up{animation:wzFlashUp 1.6s ease-out 1 both;border-radius:8px}
.wz-chg-dn{animation:wzFlashDn 1.6s ease-out 1 both;border-radius:8px}
@keyframes wzFlashUp{0%{background:rgba(255,90,95,.13);box-shadow:0 0 24px 2px rgba(255,90,95,.16)}100%{background:rgba(255,90,95,0);box-shadow:0 0 0 0 rgba(255,90,95,0)}}
@keyframes wzFlashDn{0%{background:rgba(77,142,255,.14);box-shadow:0 0 24px 2px rgba(77,142,255,.18)}100%{background:rgba(77,142,255,0);box-shadow:0 0 0 0 rgba(77,142,255,0)}}
/* 숫자 자리: 옛 값과 새 값을 세로로 쌓고 새 값으로 밀어 올림. 바뀐 자리에만 .is-new */
.wz-digit{display:inline-block;height:1.18em;line-height:1.18em;overflow:hidden;vertical-align:bottom}
.wz-digit>span{display:block;transition:transform var(--wz-m-open) var(--wz-e-in)}
.wz-digit.is-new>span{transform:translateY(-1.18em)}

/* 2. 막대(판단 분포 · 관문 · 막힌 이유 · 적중률) — 0.78초에 미끄러지듯 차고 빛줄기가 한 번 지나감. 길이는 처음부터 최종값. */
.wz-bar-fill{position:relative;overflow:hidden;transform-origin:left center;animation:wzGrow .78s var(--wz-e-in) 1 both}
.wz-bar-fill::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%) 0 0/260% 100% no-repeat;animation:wzSheen .9s .78s ease-out 1 both}
@keyframes wzGrow{from{transform:scaleX(.02)}to{transform:scaleX(1)}}
@keyframes wzSheen{from{background-position:140% 0}to{background-position:-60% 0}}

/* 3. 보유 표에서 고르면 — 선택 배경이 이전 줄에서 새 줄로 0.6초 미끄러지고, 오른쪽 상세는 흐렸다가 또렷해짐(0.55초). */
.wz-select-bg{position:absolute;left:0;right:0;border-radius:10px;background:rgba(224,178,92,.08);box-shadow:inset 0 0 0 1px rgba(224,178,92,.35);transition:transform .6s var(--wz-e-move),height .6s var(--wz-e-move);pointer-events:none}
.wz-detail-swap{animation:wzFocus .55s var(--wz-e-in) 1 both}
@keyframes wzFocus{from{opacity:0;filter:blur(6px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:none}}

/* 4. 접기 칸(자세히 · 매수 내역 · 전망 근거 · 기술 상세) — 높이 0.42초, 글자는 거의 다 열린 뒤 따라옴. 닫을 때는 글자 먼저. */
.wz-fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--wz-m-open) var(--wz-e-in)}
.wz-fold>div{overflow:hidden;min-height:0;opacity:0;transition:opacity .15s ease 0s}
.wz-fold.is-open{grid-template-rows:1fr}
.wz-fold.is-open>div{opacity:1;transition:opacity .2s ease .25s}
.wz-fold-arrow{display:inline-block;transition:transform .15s ease}
.is-open>.wz-fold-head .wz-fold-arrow{transform:rotate(180deg)}

/* 5. 탭 표시(전체/국내/미국 · 상세 탭 · 폰 아래 탭) — 금색 배경이 0.48초에 새 자리로. 내용은 바로 바뀜. */
.wz-tab-ind{position:absolute;top:3px;bottom:3px;border-radius:999px;background:linear-gradient(180deg,#EDC985,#D7A653);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:transform .48s var(--wz-e-move),width .48s var(--wz-e-move);pointer-events:none}

/* 6. 불러오는 중 — 회색 뼈대 위로 옅은 금빛이 2.4초 주기로 흐름(반복 허용). 1초 넘으면 "불러오는 중 · 08:03 값"처럼 마지막 값을 같이. */
.wz-skel{background:linear-gradient(100deg,rgba(255,255,255,.03) 25%,rgba(233,194,122,.09) 45%,rgba(255,255,255,.03) 65%) 0 0/250% 100% no-repeat,#18212C;animation:wzShimmer 2.4s var(--wz-e-move) infinite;border-radius:8px;color:transparent}
@keyframes wzShimmer{from{background-position:160% 0}to{background-position:-60% 0}}

/* 7. 장중 점 — 장중이고 시세 3분 안일 때만 2.8초 숨결(반복 허용). 지연은 주황·정지, 마감은 회색·정지. */
.wz-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3CC585;animation:wzPulse 2.8s ease-out 3}
.wz-live-dot.is-stale{background:#F2A93B;animation:none}
.wz-live-dot.is-closed{background:#8A97A8;animation:none}
@keyframes wzPulse{0%{box-shadow:0 0 0 0 rgba(60,197,133,.38)}70%{box-shadow:0 0 0 9px rgba(60,197,133,0)}100%{box-shadow:0 0 0 0 rgba(60,197,133,0)}}

/* 8. 다시 읽기 알림 — 유리 질감 알림이 흐림에서 또렷해지며 올라오고, 아래 금색 선이 3초 동안 줄어듦. 글: "08:03 새로 읽음 · 바뀐 숫자 4개". 바뀐 칸엔 1번이 같이. */
.wz-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);padding:12px 16px;border-radius:14px;background:rgba(18,25,34,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 32px -16px rgba(0,0,0,.75);color:#E8EDF3;font-size:13px;animation:wzToastIn .42s var(--wz-e-in) 1 both}
.wz-toast.is-leaving{animation:wzToastOut .28s ease-in 1 both}
.wz-toast-prog{position:absolute;left:14px;right:14px;bottom:0;height:2px;background:#E0B25C;transform-origin:left center;animation:wzProg 3s linear 1 both}
@keyframes wzToastIn{from{opacity:0;transform:translate(-50%,14px) scale(.98);filter:blur(4px)}to{opacity:1;transform:translate(-50%,0);filter:blur(0)}}
@keyframes wzToastOut{to{opacity:0;transform:translate(-50%,14px) scale(.98);filter:blur(4px)}}
@keyframes wzProg{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* 9. 폰: 요약 카드가 화면 밖으로 나가면 유리 요약 줄("총자산 · 오늘 손익")이 0.48초에 내려와 붙음. */
.wz-sticky-sum{position:sticky;top:0;z-index:5;transform:translateY(-100%);transition:transform .48s var(--wz-e-in);background:rgba(11,15,20,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.07)}
.wz-sticky-sum.is-on{transform:none}

/* 10. 폰: 종목을 누르면 시트가 0.56초에 올라오고 뒤 목록은 살짝 작아지며 어두워짐. 아래로 끌면 닫힘. */
.wz-sheet{position:fixed;left:0;right:0;bottom:0;max-height:92vh;border-radius:18px 18px 0 0;background:#121922;box-shadow:0 -12px 40px -16px rgba(0,0,0,.75);transform:translateY(102%);transition:transform var(--wz-m-sheet) var(--wz-e-sheet)}
.wz-sheet.is-open{transform:none}
.wz-sheet-back{transform-origin:50% 0;transition:transform var(--wz-m-sheet) var(--wz-e-sheet),border-radius var(--wz-m-sheet),filter var(--wz-m-sheet)}
.wz-sheet-back.is-recede{transform:scale(.94) translateY(8px);border-radius:18px;filter:brightness(.72)}
.wz-sheet-dim{position:fixed;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity var(--wz-m-sheet) ease;pointer-events:none}
.wz-sheet-dim.is-on{opacity:1;pointer-events:auto}

/* 누름 반응 0.18초 */
.wz-press{transition:transform var(--wz-m-press) var(--wz-e-in)}
.wz-press:active{transform:scale(.98)}

/* 카드 질감: 위쪽 옅은 빛 · 1px 안쪽 하이라이트 · 아래로 넓은 그림자 */
.wz-card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,0) 40%),#121922;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 12px 32px -16px rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.07);border-radius:18px}

/* 동작 줄이기: 전부 끔. 멈춘 화면이 완결. */
@media (prefers-reduced-motion:reduce){
  [class^="wz-"],[class*=" wz-"],[class^="wz-"]::after,[class*=" wz-"]::after{animation:none!important;transition:none!important}
  .wz-fold>div{opacity:1}.wz-skel{color:inherit}
}