/* ===== Signature WIP Toast (PNG/텍스트 전용) ===================================
   - 아래에서 부드럽게 올라왔다가(EASY) 내려가며(EASY) 사라짐
   - 글래스/골드 테두리, 라이트·다크 자동 대응, 세이프에어리어 준수
   - 모든 모션·블러·슬라이드 값은 변수로 "쉽게(EASY)" 조절
   ============================================================================ */

   :root{
    --wip-ease-in:  cubic-bezier(.22,.61,.36,1);  /* EASY in */
    --wip-ease-out: cubic-bezier(.22,.61,.36,1);  /* EASY out */
    --wip-dur-in:  .56s;   /* 등장 시간 */
    --wip-dur-out: .44s;   /* 퇴장 시간 */
    --wip-ty: 22px;        /* 아래에서 올라오는 거리 */
    --wip-blur-in:  18px;  /* 등장 블러 */
    --wip-blur-out: 12px;  /* 사라질 때 블러 */
  
    /* 톤(라이트 기본) */
    --wip-bg: rgba(255,255,255,.62);
    --wip-fg: #141414;
    --wip-ring: rgba(198,168,95,.65);        /* 샴페인 골드 */
    --wip-shadow: 0 14px 48px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
  }
  @media (prefers-color-scheme: dark){
    :root{
      --wip-bg: rgba(22,22,22,.60);
      --wip-fg: rgba(255,255,255,.96);
      --wip-shadow: 0 18px 60px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.06) inset;
    }
  }
  
  /* 레거시 임시 토스트(구 구현) 무력화 — 중복 방지 */
  .toast-wip{ display:none !important; }
  
  .sm-wip-wrap{
    position: fixed;
    inset: auto 0 0 0;               /* 하단 정렬 */
    display: grid;
    place-items: end center;         /* 화면 중앙 하단 */
    padding: 0 16px calc(env(safe-area-inset-bottom) + 22px);
    pointer-events: none;
    z-index: 1200;                   /* 메뉴 패널(1000)보다 위지만 헤더보다 안전 */
  }
  
  .sm-wip-toast{
    pointer-events: auto;
    color: var(--wip-fg);
    background: linear-gradient(180deg, color-mix(in oklab, var(--wip-bg) 92%, white 8%), var(--wip-bg));
    backdrop-filter: blur(14px) saturate(1.02);
    -webkit-backdrop-filter: blur(14px) saturate(1.02);
    border-radius: 14px;
    border: 1px solid color-mix(in oklab, var(--wip-ring) 50%, white 50%);
    box-shadow: var(--wip-shadow);
    padding: 12px 16px;
    min-width: 220px;
    max-width: min(560px, 86vw);
    display: grid; grid-auto-flow: column; align-items: center; gap: 10px;
  
    /* 초기 상태: 아래·투명·블러 */
    transform: translate3d(0, var(--wip-ty), 0);
    opacity: 0;
    filter: blur(var(--wip-blur-in));
    transition:
      transform var(--wip-dur-in)  var(--wip-ease-in),
      opacity   var(--wip-dur-in)  var(--wip-ease-in),
      filter    var(--wip-dur-in)  var(--wip-ease-in);
    will-change: transform, opacity, filter;
  }
  
  /* 아이콘(동그라미 골드 링) */
  .sm-wip-toast .dot{
    width: 10px; height: 10px; border-radius: 999px;
    box-shadow: 0 0 0 2px color-mix(in oklab, var(--wip-ring) 74%, transparent 26%) inset,
                0 0 10px color-mix(in oklab, var(--wip-ring) 50%, transparent 50%);
    background: var(--wip-ring);
  }
  
  /* 타이포 */
  .sm-wip-toast .title{
    font: 600 13.5px/1.1 "Jost", system-ui, -apple-system, "Noto Sans KR", sans-serif;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .sm-wip-toast .desc{
    font: 400 12.5px/1.35 "Noto Sans KR", system-ui, sans-serif;
    opacity: .82;
  }
  
  /* 등장 완료 */
  .sm-wip-toast[data-state="visible"]{
    transform: translate3d(0,0,0);
    opacity: 1;
    filter: blur(0);
  }
  /* 퇴장(아래로 미끄러지며 부드럽게 흐려짐) */
  .sm-wip-toast[data-state="leaving"]{
    transition:
      transform var(--wip-dur-out) var(--wip-ease-out),
      opacity   var(--wip-dur-out) var(--wip-ease-out),
      filter    var(--wip-dur-out) var(--wip-ease-out);
    transform: translate3d(0, calc(var(--wip-ty)*.65), 0);
    opacity: 0;
    filter: blur(var(--wip-blur-out));
  }
  
  /* 접근성: 모션 최소화 환경 */
  @media (prefers-reduced-motion: reduce){
    .sm-wip-toast,
    .sm-wip-toast[data-state="leaving"]{
      transition: none !important;
      transform: none !important;
      filter: none !important;
      opacity: 1 !important;
    }
  }