dpot-frontend/app/studio/settings/style.scss

// 페이지 타이틀
.settings-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
}

// 로딩
.settings-loading {
	color: hsl(var(--muted-foreground));
	font-size: 0.875rem;
}

// 알림 (성공 / 에러)
.settings-alert {
	margin-bottom: 20px;
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 0.875rem;

	&--success {
		background-color: #dcfce7;
		color: #15803d;
		border: 1px solid #bbf7d0;
	}

	&--error {
		background-color: color-mix(in srgb, hsl(var(--destructive)) 10%, transparent);
		color: hsl(var(--destructive));
		border: 1px solid color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
	}
}

// ── 연동된 채널 정보 ─────────────────────────────────
.settings-channel {
	max-width: 760px;

	// 배너
	&__banner {
		border-radius: 12px;
		overflow: hidden;
		margin-bottom: 20px;
		background: hsl(var(--muted));
	}

	&__banner-img {
		width: 100%;
		height: auto;
		display: block;
		aspect-ratio: 6 / 1;
		object-fit: cover;
	}

	// 프로필 (썸네일 + 이름 + 메타)
	&__profile {
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 28px;
	}

	&__avatar {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		object-fit: cover;
		flex-shrink: 0;
		background: hsl(var(--muted));
	}

	&__avatar-placeholder {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		flex-shrink: 0;
		background: hsl(var(--muted));
	}

	&__identity {
		min-width: 0;
		flex: 1;
	}

	&__name {
		font-size: 1.375rem;
		font-weight: 700;
		color: hsl(var(--foreground));
		margin: 0 0 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		font-size: 0.8125rem;
		color: hsl(var(--muted-foreground));

		span + span::before {
			content: '·';
			margin-right: 4px;
		}
	}

	// 상세 정보
	&__details {
		display: flex;
		flex-direction: column;
		gap: 0;
		border: 1px solid hsl(var(--border));
		border-radius: 12px;
		background: hsl(var(--card));
		overflow: hidden;
	}

	&__row {
		display: flex;
		gap: 14px;
		padding: 14px 20px;
		align-items: flex-start;

		& + & {
			border-top: 1px solid hsl(var(--border));
		}
	}

	&__icon {
		width: 16px;
		flex-shrink: 0;
		margin-top: 3px;
		color: hsl(var(--muted-foreground));
		font-size: 0.875rem;
		text-align: center;
	}

	&__value {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
		flex: 1;
		font-size: 0.875rem;
		color: hsl(var(--foreground));
	}

	&__label {
		font-size: 0.75rem;
		font-weight: 600;
		color: hsl(var(--muted-foreground));
	}

	&__desc {
		margin: 0;
		line-height: 1.6;
		white-space: pre-wrap;
		word-break: break-word;
	}

	&__link {
		color: hsl(var(--primary));
		text-decoration: none;
		word-break: break-all;

		&:hover {
			text-decoration: underline;
		}
	}

	// 통계 카드
	&__stats {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		border-top: 1px solid hsl(var(--border));
	}

	&__stat {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 16px 12px;

		& + & {
			border-left: 1px solid hsl(var(--border));
		}
	}

	&__stat-icon {
		font-size: 1rem;
		color: hsl(var(--muted-foreground));
	}

	&__stat-value {
		font-size: 1.125rem;
		font-weight: 700;
		color: hsl(var(--foreground));
	}

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

// ── YouTube 미연동 안내 카드 ──────────────────────────
.settings-connect-card {
	display: flex;
	flex-direction: column;
	gap: 32px;

	&__icon {
		width: clamp(80px, 140px, 200px);
		font-size: 2rem;
		line-height: 1;
		flex-shrink: 0;
		padding-top: 2px;

		> svg {
			width: inherit;
			height: inherit;
		}
	}

	&__body {
		display: flex;
		flex-direction: column;
		gap: 8px;
		flex: 1;
		min-width: 0;
	}

	&__title {
		font-size: 0.9375rem;
		font-weight: 700;
		color: hsl(var(--foreground));
		margin-bottom: 7px;
	}

	&__desc {
		font-size: 0.875rem;
		color: hsl(var(--muted-foreground));
		line-height: 1.6;
	}

	&__scope-list {
		list-style: none;
		padding: 0;
		margin: 8px 0 16px;
		display: flex;
		flex-direction: column;
		gap: 6px;

		li {
			font-size: 0.875rem;
			color: hsl(var(--muted-foreground));
			padding-left: 16px;
			position: relative;

			&::before {
				content: '•';
				position: absolute;
				left: 0;
				color: hsl(var(--primary));
			}
		}
	}

	&__terms {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 16px 20px;
		border: 1px solid hsl(var(--border));
		border-radius: 10px;
		background-color: hsl(var(--card));
		margin-bottom: 20px;
	}

	&__terms-item {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}

	&__terms-label {
		font-size: 0.8125rem;
		color: hsl(var(--foreground));
		line-height: 1.5;
		cursor: pointer;
	}

	&__terms-required {
		color: hsl(var(--destructive));
		font-weight: 600;
		margin-right: 4px;
	}

	&__terms-link {
		color: hsl(var(--primary));
		text-decoration: underline;
		text-underline-offset: 2px;

		&:hover,
		&:focus {
			opacity: 0.8;
		}
	}

	&__btn {
		align-self: flex-start;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 10px 22px;
		border-radius: 8px;
		border: none;
		background-color: hsl(var(--primary));
		color: hsl(var(--primary-foreground));
		font-size: 0.9375rem;
		font-weight: 600;
		cursor: pointer;
		transition: opacity 0.15s;

		&:hover:not(:disabled) {
			opacity: 0.9;
		}

		&:disabled {
			opacity: 0.4;
			cursor: not-allowed;
		}

		svg {
			flex-shrink: 0;
		}
	}
}

// ── YouTube 연동 해지 ──────────────────────────────────
.settings-disconnect {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid hsl(var(--border));
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;

	&__logo {
		flex-grow: 0;
		width: clamp(80px, 140px, 200px);

		> svg {
			width: inherit;
			height: inherit;
		}
	}

	&__hint {
		flex-grow: 1;
		font-size: 0.8125rem;
		color: hsl(var(--muted-foreground));
		line-height: 1.5;
	}

	&__trigger {
		flex-shrink: 0;
		color: hsl(var(--destructive));
		font-size: 0.8125rem;
		font-weight: 600;
		cursor: pointer;

		&:hover {
			color: var(--text-link);
			text-decoration: underline;
		}
	}

	// 해지 확인 카드
	&__card {
		margin-top: 32px;
		padding: 24px;
		border: 1px solid color-mix(in srgb, hsl(var(--destructive)) 30%, transparent);
		border-radius: 12px;
		background: color-mix(in srgb, hsl(var(--destructive)) 4%, hsl(var(--card)));
	}

	&__card-title {
		font-size: 1rem;
		font-weight: 700;
		color: hsl(var(--destructive));
		margin-bottom: 8px;
	}

	&__card-desc {
		font-size: 0.875rem;
		color: hsl(var(--muted-foreground));
		line-height: 1.6;
		margin-bottom: 12px;
	}

	&__impact-list {
		list-style: none;
		padding: 0;
		margin: 0 0 20px;
		display: flex;
		flex-direction: column;
		gap: 6px;

		li {
			font-size: 0.875rem;
			color: hsl(var(--foreground));
			padding-left: 16px;
			position: relative;

			&::before {
				content: '×';
				position: absolute;
				left: 0;
				color: hsl(var(--destructive));
				font-weight: 700;
			}
		}
	}

	&__terms {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 16px 20px;
		border: 1px solid hsl(var(--border));
		border-radius: 10px;
		background-color: hsl(var(--card));
		margin-bottom: 20px;
	}

	&__terms-item {
		display: flex;
		align-items: flex-start;
		gap: 10px;
	}

	&__terms-label {
		font-size: 0.8125rem;
		color: hsl(var(--foreground));
		line-height: 1.5;
		cursor: pointer;
	}

	&__terms-required {
		color: hsl(var(--destructive));
		font-weight: 600;
		margin-right: 4px;
	}

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

	&__btn {
		display: inline-flex;
		align-items: center;
		padding: 10px 22px;
		border-radius: 8px;
		border: none;
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
		transition: opacity 0.15s, background-color 0.15s;

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

			&:hover {
				opacity: 0.8;
			}
		}

		&--danger {
			background-color: hsl(var(--destructive));
			color: hsl(var(--destructive-foreground));

			&:hover:not(:disabled) {
				opacity: 0.9;
			}

			&:disabled {
				opacity: 0.4;
				cursor: not-allowed;
			}
		}
	}
}