ANTOOZA-FRONTEND/app/studio/dashboard/style.scss

// ── 대시보드 ──────────────────────────────────────
.dashboard {
	width: 100%;
	max-width: 960px;

	// ── 재무 요약 카드 ──
	&__cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 16px;
		margin-bottom: 32px;
	}

	&__card {
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		padding: 20px;
		background: hsl(var(--background));
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	&__card-icon {
		font-size: 1.25rem;
		color: hsl(var(--muted-foreground));
		margin-bottom: 4px;
	}

	&__card-label {
		font-size: 0.8125rem;
		color: hsl(var(--muted-foreground));
	}

	&__card-value {
		font-size: 1.5rem;
		font-weight: 700;
		color: hsl(var(--foreground));

		&--primary {
			color: hsl(var(--primary));
		}

		&--danger {
			color: var(--color-danger);
		}
	}

	// ── 섹션 ──
	&__section {
		margin-bottom: 32px;
	}

	&__section-title {
		font-size: 1.125rem;
		font-weight: 600;
		color: hsl(var(--foreground));
		margin-bottom: 8px;
	}

	&__section-desc {
		font-size: 0.8125rem;
		color: hsl(var(--muted-foreground));
		margin-bottom: 16px;
	}

	// ── 위젯 URL ──
	&__widget-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	&__widget-item {
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		padding: 16px 20px;
		background: hsl(var(--background));
		display: flex;
		align-items: center;
		gap: 16px;
	}

	&__widget-info {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 120px;
		flex-shrink: 0;
	}

	&__widget-label {
		font-size: 0.9375rem;
		font-weight: 600;
		color: hsl(var(--foreground));
	}

	&__widget-desc {
		font-size: 0.75rem;
		color: hsl(var(--muted-foreground));
	}

	&__widget-url {
		flex: 1;
		width: 0;
		min-width: 0;
		overflow: hidden;
	}

	&__widget-url-text {
		display: block;
		font-size: 0.8125rem;
		color: hsl(var(--muted-foreground));
		background: hsl(var(--muted));
		padding: 6px 10px;
		border-radius: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-family: 'Fira Code', 'Consolas', monospace;
	}

	&__widget-select {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 0.8125rem;
		padding: 6px 10px;
		border: 1px solid hsl(var(--border));
		border-radius: 4px;
		background: hsl(var(--background));
		color: hsl(var(--foreground));
		cursor: pointer;
	}

	&__widget-empty-inline {
		display: block;
		font-size: 0.8125rem;
		color: hsl(var(--muted-foreground));
		font-style: italic;
		padding: 6px 10px;
	}

	&__widget-actions {
		display: flex;
		gap: 6px;
		flex-shrink: 0;
	}

	&__widget-btn {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		padding: 6px 12px;
		border: 1px solid hsl(var(--border));
		border-radius: calc(var(--radius) - 2px);
		font-size: 0.8125rem;
		font-weight: 500;
		cursor: pointer;
		background: hsl(var(--background));
		color: hsl(var(--foreground));
		transition: background-color 0.15s;
		white-space: nowrap;

		&:hover {
			background: hsl(var(--accent));
		}

		&--copied {
			background: hsl(var(--primary));
			color: hsl(var(--primary-foreground));
			border-color: hsl(var(--primary));
		}

		&--open {
			color: hsl(var(--primary));
			border-color: hsl(var(--primary));

			&:hover {
				background: hsl(var(--primary) / 0.1);
			}
		}
	}

	// ── 최근 후원 ──
	&__donation-list {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	&__donation-item {
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		padding: 14px 20px;
		background: hsl(var(--background));
	}

	&__donation-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 4px;
	}

	&__donation-name {
		font-size: 0.9375rem;
		font-weight: 600;
		color: hsl(var(--foreground));
	}

	&__donation-amount {
		font-size: 0.9375rem;
		font-weight: 700;
		color: hsl(var(--primary));
	}

	&__donation-msg {
		font-size: 0.8125rem;
		color: hsl(var(--foreground));
		margin-bottom: 4px;
		line-height: 1.4;
	}

	&__donation-time {
		font-size: 0.75rem;
		color: hsl(var(--muted-foreground));
	}

	&__empty {
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		padding: 40px 24px;
		text-align: center;
		color: hsl(var(--muted-foreground));
		font-size: 0.875rem;
	}

	// ── 반응형 ──
	@media (max-width: 768px) {
		&__cards {
			grid-template-columns: repeat(2, 1fr);
			gap: 10px;
			margin-bottom: 24px;
		}

		&__card {
			padding: 14px;
		}

		&__card-value {
			font-size: 1.25rem;
		}

		&__section {
			margin-bottom: 24px;
		}

		&__section-title {
			font-size: 1rem;
		}

		&__widget-item {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
			padding: 14px 16px;
		}

		&__widget-info {
			min-width: 0;
			width: 100%;
		}

		&__widget-url {
			width: 100%;
		}

		&__widget-url-text {
			font-size: 0.75rem;
			padding: 8px 10px;
		}

		&__widget-actions {
			width: 100%;

			.dashboard__widget-btn {
				flex: 1;
				justify-content: center;
				padding: 10px 12px;
			}
		}

		&__donation-item {
			padding: 12px 14px;
		}

		&__donation-name {
			font-size: 0.875rem;
		}

		&__donation-amount {
			font-size: 0.875rem;
		}

		&__donation-msg {
			font-size: 0.75rem;
		}

		&__empty {
			padding: 28px 16px;
		}
	}

	@media (max-width: 480px) {
		&__cards {
			grid-template-columns: 1fr;
		}

		&__card-label {
			font-size: 0.75rem;
		}

		&__card-value {
			font-size: 1.125rem;
		}

		&__widget-list {
			gap: 10px;
		}

		&__widget-item {
			padding: 12px 14px;
			gap: 8px;
		}

		&__widget-label {
			font-size: 0.875rem;
		}

		&__widget-desc {
			font-size: 0.6875rem;
		}

		&__donation-list {
			gap: 6px;
		}

		&__donation-info {
			flex-direction: column;
			align-items: flex-start;
			gap: 2px;
			margin-bottom: 6px;
		}

		&__donation-time {
			font-size: 0.6875rem;
		}
	}
}