/* Dark scrollbar */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: rgba(30,41,59,0.7); }
    ::-webkit-scrollbar-thumb { background: rgba(100,116,139,0.75); border-radius: 999px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,0.9); }

    /* Wave */
    #waveform { cursor: pointer; position: relative; }

    /* Heart pop (하트 애니메이션)*/
    @keyframes heartPop {
      0%   { transform: scale(1); }
      35%  { transform: scale(1.25); }
      70%  { transform: scale(0.95); }
      100% { transform: scale(1); }
    }
    .heart-pop {
      animation: heartPop 220ms ease-out;
    }

    /* Toast animation (라이선스 표시)*/
    .toast-in {
      opacity: 1;
      transform: translate(-50%, 0) scale(1);
    }
    .toast-out {
      opacity: 0;
      transform: translate(-50%, 10px) scale(0.98);
    }
    .toast-base {
      transition: opacity 180ms ease, transform 180ms ease;
      will-change: opacity, transform;
    }

    /* Skeleton shimmer (카드만 미리 만들어서 로딩중인 걸 알도록 해주는 ui)*/
    @keyframes shimmer {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    .skel {
      position: relative;
      overflow: hidden;
    }
    .skel::after {
      content: "";
      position: absolute;
      inset: 0;
      transform: translateX(-100%);
      animation: shimmer 1.2s infinite;
      background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.08),
        transparent
      );
    }