dpot-frontend/app/studio/style.scss

// 상단 토글 바
.studio__topbar {
	display: flex;
	align-items: center;
	padding: 8px 12px;
	border-bottom: 1px solid hsl(var(--sidebar-border));
}

// 스튜디오 메인 콘텐츠 영역
.studio__content {
	flex: 1;
	overflow-y: auto;
	padding: 32px;
}

// 스튜디오 공통 관리 페이지 스타일
.studio-page {
	max-width: 900px;

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24px;
	}

	&__title {
		font-size: 1.5rem;
		font-weight: 700;
	}

	&__title-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	&__table-wrap {
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		overflow: hidden;
	}

	&__table {
		width: 100%;
		border-collapse: collapse;

		th, td {
			padding: 12px 16px;
			text-align: left;
			border-bottom: 1px solid hsl(var(--border));
			font-size: 0.875rem;
		}

		th {
			background-color: hsl(var(--muted));
			font-weight: 600;
			color: hsl(var(--muted-foreground));
		}

		tr:last-child td {
			border-bottom: none;
		}

		tr:hover td {
			background-color: hsl(var(--accent));
		}
	}

	&__badge {
		display: inline-block;
		padding: 2px 8px;
		border-radius: 4px;
		font-size: 0.75rem;
		font-weight: 600;

		&--active {
			background-color: var(--color-success-bg);
			color: var(--color-success-text);
		}

		&--inactive {
			background-color: hsl(var(--muted));
			color: hsl(var(--muted-foreground));
		}
	}

	&__actions {
		display: flex;
		gap: 6px;
	}

	&__btn {
		padding: 4px 10px;
		border-radius: 4px;
		font-size: 0.8125rem;
		cursor: pointer;
		border: 1px solid hsl(var(--border));
		background-color: transparent;
		color: hsl(var(--foreground));
		transition: background-color 0.15s;

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

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

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

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

			&:hover {
				opacity: 0.9;
				background-color: hsl(var(--primary)/0.9);
			}
		}
	}

	&__empty {
		padding: 40px;
		text-align: center;
		color: hsl(var(--muted-foreground));
	}
}

// 모달
.studio-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;

	&__overlay {
		position: absolute;
		inset: 0;
		background-color: var(--overlay-color);
	}

	&__box {
		position: relative;
		background-color: hsl(var(--background));
		border: 1px solid hsl(var(--border));
		border-radius: 12px;
		padding: 28px;
		width: 100%;
		max-width: 540px;
		max-height: 90vh;
		overflow-y: auto;
		z-index: 1;
	}

	&__title {
		font-size: 1.125rem;
		font-weight: 700;
		margin-bottom: 20px;
	}

	&__field {
		margin-bottom: 16px;

		label {
			display: block;
			font-size: 0.875rem;
			font-weight: 500;
			margin-bottom: 4px;
			color: hsl(var(--foreground));
		}

		input, select, textarea {
			width: 100%;
			padding: 8px 12px;
			border: 1px solid hsl(var(--border));
			border-radius: 6px;
			background-color: hsl(var(--background));
			color: hsl(var(--foreground));
			font-size: 0.875rem;

			&:focus {
				outline: none;
				border-color: hsl(var(--primary));
			}
		}

		input[type="color"] {
			padding: 2px 4px;
			height: 36px;
			cursor: pointer;
		}

		input[type="checkbox"] {
			width: auto;
			margin-right: 6px;
		}
	}

	&__field-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}

	&__checkbox-label {
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	&__footer {
		display: flex;
		justify-content: center;
		gap: 8px;
		margin-top: 24px;
	}

	&__hint {
		font-size: 0.75rem;
		color: hsl(var(--muted-foreground));
		margin-top: 4px;
	}
}

// 플레이스홀더 페이지
.studio-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 400px;
	color: hsl(var(--muted-foreground));
	text-align: center;
	gap: 12px;

	h1 {
		font-size: 1.5rem;
		font-weight: 700;
		color: hsl(var(--foreground));
	}

	p {
		font-size: 0.9375rem;
	}
}