ANTOOZA-FRONTEND/app/styles/notification-bell.scss

.notification-bell {
	position: relative;
	display: inline-flex;

	&__button {
		position: relative;
		background: none;
		border: none;
		cursor: pointer;
		padding: 6px;
		font-size: 1.25rem;
		color: var(--text-head);
		border-radius: 50%;
		transition: background 0.15s;

		&:hover {
			outline: 1px solid var(--outline-default);
			background: var(--bg-icon);
		}
	}

	&__badge {
		position: absolute;
		top: 0;
		right: 0;
		background: var(--color-danger);
		color: #fff;
		border-radius: 50%;
		width: 18px;
		height: 18px;
		font-size: 0.625rem;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}

	// ── Sheet(Drawer) 레이아웃 ─────────────────────────
	&__sheet {
		display: flex;
		flex-direction: column;
		padding: 0;
		gap: 0;
		border-left: 0;

		// SheetContent 내장 X 버튼 숨김 (커스텀 Close 사용)
		> button[type="button"].absolute {
			display: none;
		}
	}

	&__sheet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px 16px;
		background: var(--bg-head);
		color: var(--text-normal);
	}

	&__sheet-title {
		font-size: 1.125rem;
		font-weight: 700;
		margin: 0;
		color: inherit;
	}

	&__sheet-header-right {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	&__sheet-close {
		width: 32px;
		height: 32px;
		background: transparent;
		border: none;
		color: inherit;
		font-size: 1.25rem;
		cursor: pointer;

		&:hover {
			background: var(--bg-subtle);
			color: var(--text-primary);
		}
	}

	&__sheet-body {
		flex: 1;
		overflow-y: auto;
		min-height: 0;
	}

	&__read-all-btn {
		background: transparent;
		border: 1px solid rgba(255, 255, 255, 0.4);
		color: inherit;
		cursor: pointer;
		font-size: 0.75rem;
		font-weight: 500;
		padding: 4px 10px;
		border-radius: 4px;
		transition: background 0.15s;

		&:hover {
			background: rgba(255, 255, 255, 0.15);
		}
	}

	// ── 상태 ────────────────────────────────────────────
	&__loading,
	&__empty {
		padding: 24px 16px;
		text-align: center;
		color: var(--text-muted);
		font-size: 0.8125rem;
	}

	// ── 알림 아이템 ─────────────────────────────────────
	&__item {
		display: flex;
		gap: 10px;
		padding: 12px 20px;
		cursor: pointer;
		transition: background 0.15s;

		&:not(:last-child) {
			border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.05));
		}

		&:hover {
			background: var(--bg-subtle);
		}

		&--unread {
			background: var(--color-blue-bg);
		}
	}

	&__item-image {
		width: 36px;
		height: 36px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
	}

	&__item-content {
		flex: 1;
		overflow: hidden;
		min-width: 0;
	}

	&__item-title {
		font-size: 0.8125rem;
		color: var(--text-primary);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		&--unread {
			font-weight: 600;
		}

		&--read {
			font-weight: 400;
		}
	}

	&__item-message {
		font-size: 0.75rem;
		color: var(--text-muted);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-top: 1px;
	}

	&__item-time {
		font-size: 0.625rem;
		color: var(--text-muted);
		margin-top: 3px;
	}

	&__item-dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--color-blue);
		flex-shrink: 0;
		margin-top: 6px;
	}

	// ── 하단 푸터 ───────────────────────────────────────
	&__footer {
		display: flex;
		gap: 8px;
		padding: 12px 16px;
		border-top: 1px solid var(--border-default);
	}

	&__footer-btn {
		flex: 1;
		padding: 10px 12px;
		border-radius: 6px;
		text-align: center;
		font-size: 0.8125rem;
		font-weight: 600;
		text-decoration: none;
		transition: opacity 0.15s, background 0.15s;

		&--primary {
			background: var(--text-link);
			color: #fff;

			&:hover {
				opacity: 0.9;
			}
		}

		&--secondary {
			background: var(--bg-subtle);
			color: var(--text-primary);
			border: 1px solid var(--border-default);

			&:hover {
				background: var(--border-default);
			}
		}
	}
}