/* ============================================================
   알림 목록 페이지 — 대시보드 피드(.feed-*) 재활용
   ============================================================ */

/* 필터 pill */
.ntf-filters { display: flex; flex-wrap: wrap; gap: 5px; }
.ntf-filter {
    border: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-body-color);
    border-radius: var(--bs-border-radius);
    padding: 5px 15px;
    font-size: var(--font-normal);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ntf-filter:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.ntf-filter.active {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}
.ntf-filter .cnt { font-weight: 700; }

.unread-only {
    font-size: var(--font-normal);
    color: var(--bs-secondary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    margin: 0;
}

/* 목록 */
.ntf-list { list-style: none; margin: 0; padding: 0; }
.ntf-item {
    border-bottom: 1px solid var(--bs-border-color);
    cursor: pointer;
}
.ntf-item:last-child { border-bottom: 0; }
.ntf-item.unread { background: rgba(var(--bs-primary-rgb), 0.04); }
.ntf-item.unread .txt { font-weight: 600; color: var(--bs-emphasis-color); }
[data-bs-theme="dark"] .ntf-item { border-bottom-color: var(--bs-slate-700); }
[data-bs-theme="dark"] .ntf-item.unread { background: rgba(var(--bs-primary-rgb), 0.10); }

/* 안 읽음 점 */
.ntf-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-primary);
    flex-shrink: 0;
}
.ntf-item:not(.unread) .ntf-dot { visibility: hidden; }

/* 타입별 아이콘 색 (feed-avatar 기본 보라 위에 덮어쓰기) */
.ntf-ico.ntf-reserve { background: rgba(var(--bs-primary-rgb), 0.12);  color: var(--bs-primary); }
.ntf-ico.ntf-cancel  { background: rgba(var(--bs-danger-rgb), 0.12);   color: var(--bs-danger); }
.ntf-ico.ntf-noshow  { background: rgba(var(--bs-warning-rgb), 0.15);  color: var(--bs-warning); }
.ntf-ico.ntf-system  { background: rgba(var(--bs-secondary-rgb), 0.12); color: var(--bs-secondary); }
.ntf-ico.ntf-payment { background: rgba(var(--bs-success-rgb), 0.12);  color: var(--bs-success); }