/* 상단 중앙 배경 (유지) */
.toast-top-bg {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
@supports ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .toast-top-bg {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }
}
/* 우하단 토스트 포인트 색 표시(좌측 얇은 바 + 아이콘 컬러) */
.toast-accent {
  position: relative;
}
.toast-accent::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, #0ea5e9); /* 기본: sky-500 */
  border-radius: 8px 0 0 8px;
}

/* 아이콘 색을 포인트 색으로 */
.toast-accent .toast-icon {
  color: rgb(var(--accent-rgb, 14, 165, 233)); /* 0ea5e9 */
}

/* 살짝 테두리 빛(과하면 주석 처리) */
.toast-accent {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 14, 165, 233), 0.12),
    0 2px 10px rgba(var(--accent-rgb, 14, 165, 233), 0.1);
}

/* ── 공통: 악센트 색 변수
   --accent / --accent-rgb 를 Item.tsx에서 넣어줌 */

/* 좌측 얇은 바 (기본 4px) */
.toast-accent-left {
  position: relative;
}
.toast-accent-left::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--accent, #0ea5e9);
  border-radius: 8px 0 0 8px;
}

/* 좌측 두꺼운 바 (8px) */
.toast-accent-left-thick {
  position: relative;
}
.toast-accent-left-thick::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 8px;
  background: var(--accent, #0ea5e9);
  border-radius: 10px 0 0 10px;
}

/* 상단 얇은 바 (3px) */
.toast-accent-top {
  position: relative;
}
.toast-accent-top::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent, #0ea5e9);
  border-radius: 10px 10px 0 0;
}

/* 아이콘 원형 칩 */
.toast-icon-chip {
  position: relative;
}
.toast-icon-chip .toast-icon {
  position: relative;
  z-index: 1;
  color: rgb(var(--accent-rgb, 14, 165, 233)); /* sky-500 */
}
.toast-icon-chip::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 40px; /* 아이콘 좌표 근처(갭 3 기준) */
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background: rgba(var(--accent-rgb, 14, 165, 233), 0.18);
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 14, 165, 233), 0.25),
    0 6px 16px rgba(var(--accent-rgb, 14, 165, 233), 0.25);
  pointer-events: none;
}

/* 살짝 테두리/그림자 (좌측/상단 바 스타일 공통 강화) */
.toast-accent-left,
.toast-accent-left-thick,
.toast-accent-top {
  box-shadow:
    0 0 0 1px rgba(var(--accent-rgb, 14, 165, 233), 0.12),
    0 2px 10px rgba(var(--accent-rgb, 14, 165, 233), 0.1);
}
/* ===== 네온 글로우 =====

    색 바꾸기: glowHex/glowRgb만 바꾸면 네온 톤 변경
    광량 줄이기: .toast-neon의 box-shadow 알파값이나 ::before blur/opacity를 낮추기
    퍼포먼스: 저사양 뷰에서 부담되면 @media (prefers-reduced-motion: reduce)에 animation: none

   --glow: 메인 색(hex 또는 rgba)
   --glow-rgb: r,g,b 숫자 3개 (box-shadow용) */

.toast-neon {
  position: relative;
  /* 부드러운 네온 외곽광 */
  box-shadow:
    0 0 0 1px rgba(var(--glow-rgb, 245, 158, 11), 0.2),
    0 0 9px rgba(var(--glow-rgb, 245, 158, 11), 0.3),
    0 0 18px rgba(var(--glow-rgb, 245, 158, 11), 0.2);
}
.toast-neon::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  pointer-events: none;
  /* 링 느낌의 헤일로 (살짝 흐림) */
  background: radial-gradient(
    closest-side,
    color-mix(in oklab, var(--glow, #f59e0b) 55%, transparent) 0%,
    transparent 95%
  );
  filter: blur(14px);
  opacity: 0.7;
  animation: neonPulse 2.4s ease-in-out infinite;
  z-index: 0;
}
@keyframes neonPulse {
  0%,
  100% {
    opacity: 0.68;
  }
  50% {
    opacity: 0.86;
  }
}

/* ===== CRT 스캔라인 (옵션) ===== */
.toast-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.08) 0px,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
  opacity: 0.16;
  animation: scan 7s linear infinite;
  z-index: 1; /* 내용(z-10) 아래, 배경 위 */
}
@keyframes scan {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 0 8px;
  }
}

/* 상단 중앙 토스트: 텍스트 색을 흰색으로 고정 (라이트/다크 공통) */
.toast-top-bg,
.dark .toast-top-bg {
  --toast-top-fg: 255, 255, 255;
  color: rgb(var(--toast-top-fg)) !important;
}

/* 자식들도 상속받도록 강제 (부트스트랩 유틸 덮어쓰기 방지) */
.toast-top-bg :is(h1, h2, h3, h4, h5, h6, p, div, span, small, strong, button, .toast-icon) {
  color: inherit !important;
}

/* 아이콘(SVG)도 흰색 따르게 */
.toast-top-bg svg {
  color: inherit !important;
  stroke: currentColor !important;
}

/* 링크도 흰색 + 필요 시 밑줄 */
.toast-top-bg a {
  color: inherit !important;
  text-decoration: underline;
}

/* 닫기 버튼도 흰색 유지 */
.toast-top-bg [aria-label='close'] {
  color: inherit !important;
}

/* 우측 하단(bottom-right) 토스트: 텍스트 컬러 고정 */
.toast-br {
  color: #000 !important; /* 기본(라이트) = 검정 */
}

.dark .toast-br {
  color: #fff !important; /* 다크 = 흰색 */
}

/* 자식들도 상속받게 (부트스트랩 유틸 덮어쓰기 방지) */
.toast-br :is(h1, h2, h3, h4, h5, h6, p, div, span, small, strong, button, a) {
  color: inherit !important;
}

/* 닫기 버튼도 따라가게 */
.toast-br [aria-label='close'] {
  color: inherit !important;
}

/* 트랙 */
.toast-progress-track-top {
  height: 4px;
  background-color: rgba(255, 255, 255, 0.16) !important;
}
.toast-progress-track-br {
  height: 4px;
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.dark .toast-br .toast-progress-track-br {
  background-color: rgba(255, 255, 255, 0.16) !important;
}

/* 막대: scaleX로 감소 (우측 기준) */
.toast-progress-bar-top,
.toast-progress-bar-br {
  height: 4px;
  transform-origin: right center;
  will-change: transform; /* GPU */
}

/* 색상/투명도 */
.toast-progress-bar-top {
  background-color: rgba(255, 255, 255, 0.85) !important;
}
.toast-progress-bar-br {
  background-color: currentColor !important;
  opacity: 0.7;
}

/* 모션 최소화 환경 */
@media (prefers-reduced-motion: reduce) {
  .toast-progress-bar-top,
  .toast-progress-bar-br {
    transition: none;
  }
}
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  } /* 2번 반복 렌더링 전제 */
}

.marquee {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 1.25rem;
  animation-name: marquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

@keyframes newItemFlash {
  0% {
    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    transform: translateY(0);
  }
  15% {
    box-shadow: 0 0 18px rgba(16, 185, 129, 0.45);
    transform: translateY(-1px);
  }
  60% {
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
  }
  100% {
    box-shadow: 0 0 0 rgba(16, 185, 129, 0);
    transform: translateY(0);
  }
}

.new-item-flash {
  animation: newItemFlash 1.2s ease-in-out 0s 2;
}

@keyframes newItemSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-14px);
  }
  60% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.new-item-slidein {
  animation: newItemSlideIn 420ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

/* 세로로 한 줄씩 올리는 티커 */
.vticker {
  will-change: transform;
  transition: transform 1520ms cubic-bezier(0.2, 0.9, 0.2, 1);
}