/* 이미 쓰고 있는 상단 중앙 배경 (유지) */
.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;
    }
}

/* 공지 본문 전용 */
.notice-prose {
    /* 텍스트 */
    color: rgb(17 24 39); /* gray-900 */
}
.dark .notice-prose {
    color: rgb(229 231 235); /* gray-200 */
}

.notice-prose h1,
.notice-prose h2,
.notice-prose h3 {
    font-weight: 700;
    line-height: 1.25;
    margin: 1.25em 0 0.6em;
}
.notice-prose p {
    margin: 0.8em 0;
    line-height: 1.7;
}
.notice-prose ul,
.notice-prose ol {
    padding-left: 1.2em;
    margin: 0.8em 0;
}
.notice-prose li {
    margin: 0.25em 0;
}
.notice-prose a {
    color: #2563eb;
    text-decoration: underline;
}
.dark .notice-prose a {
    color: #93c5fd;
}

.notice-prose blockquote {
    padding: 0.6em 1em;
    border-left: 3px solid rgba(148, 163, 184, 0.4);
    background: rgba(148, 163, 184, 0.08);
    border-radius: 0.5rem;
}
.dark .notice-prose blockquote {
    border-color: rgba(148, 163, 184, 0.35);
    background: rgba(148, 163, 184, 0.06);
}

.notice-prose img,
.notice-prose video {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}
.notice-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.95rem;
}
.notice-prose th,
.notice-prose td {
    border: 1px solid rgba(148, 163, 184, 0.3);
    padding: 0.5em 0.6em;
}
.dark .notice-prose th,
.dark .notice-prose td {
    border-color: rgba(148, 163, 184, 0.2);
}

.notice-prose pre,
.notice-prose code {
    font-family:
        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
}
.notice-prose pre {
    background: rgba(2, 6, 23, 0.85);
    color: #e5e7eb;
    padding: 0.9em 1em;
    border-radius: 0.75rem;
    overflow: auto;
}
.notice-prose code {
    background: rgba(2, 6, 23, 0.08);
    padding: 0.15em 0.35em;
    border-radius: 0.35rem;
}
.dark .notice-prose code {
    background: rgba(148, 163, 184, 0.15);
}