ANTOOZA-FRONTEND/app/(main)/(account)/sns-link/style.scss

#sns-link {
	max-width: 720px;
	margin: 0 32px 32px 32px;
	padding: 0;

	@media (max-width: 768px) {
		margin: 16px 0 32px;
	}

	h1 {
		font-size: 1.375rem;
		font-weight: 700;
		color: var(--text-primary);
		margin: 0 0 8px;
	}

	.sns-link__intro {
		font-size: 0.875rem;
		color: var(--text-muted);
		margin: 0 0 20px;
		line-height: 1.5;
	}

	.sns-link__status {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 14px;
		margin-bottom: 16px;
		background: var(--bg-subtle);
		border: 1px solid var(--border-default);
		border-left: 3px solid var(--color-accent);
		border-radius: 6px;
		font-size: 0.875rem;
		color: var(--text-primary);

		button {
			border: none;
			background: transparent;
			color: var(--text-muted);
			cursor: pointer;
			font-size: 1.125rem;
			line-height: 1;
			padding: 0 4px;
			flex-shrink: 0;

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

	.sns-link__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.sns-link__item {
		display: flex;
		align-items: center;
		gap: 14px;
		padding: 14px 16px;
		background: var(--bg-page);
		border: 1px solid var(--border-default);
		border-radius: 10px;
		transition: border-color 0.15s, background 0.15s;

		&--connected {
			border-color: var(--color-accent);
			background: var(--bg-elevated);
		}

		&--disabled {
			opacity: 0.6;
		}
	}

	.sns-link__item-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background: var(--bg-subtle);
		color: var(--text-secondary);
		flex-shrink: 0;
		font-size: 1.125rem;

		.sns-link__icon-text {
			font-weight: 700;
			font-size: 1rem;
		}

		&--google {
			background: #fff;
			color: #4285F4;
			border: 1px solid var(--border-default);
		}

		&--naver {
			background: #03C75A;
			color: #fff;
		}

		&--kakao {
			background: #FEE500;
			color: #3C1E1E;
		}
	}

	.sns-link__item-body {
		flex: 1;
		min-width: 0;
	}

	.sns-link__item-title {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--text-primary);
	}

	.sns-link__item-meta {
		font-size: 0.8125rem;
		color: var(--text-muted);
		margin-top: 2px;
		line-height: 1.4;
	}

	.sns-link__badge {
		display: inline-flex;
		align-items: center;
		padding: 2px 8px;
		font-size: 0.6875rem;
		font-weight: 600;
		border-radius: 999px;

		&--soon {
			background: var(--bg-subtle);
			color: var(--text-muted);
			border: 1px solid var(--border-default);
		}

		&--warn {
			background: #fef3c7;
			color: #92400e;
			border: 1px solid #fcd34d;
		}
	}

	.sns-link__toggle {
		position: relative;
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 0 14px 0 6px;
		height: 30px;
		min-width: 78px;
		border: 1px solid var(--border-strong);
		border-radius: 999px;
		background: var(--bg-subtle);
		color: var(--text-secondary);
		font-size: 0.75rem;
		font-weight: 700;
		cursor: pointer;
		transition: background 0.18s, border-color 0.18s, color 0.18s;
		flex-shrink: 0;

		&-knob {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #fff;
			box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
			transition: transform 0.18s;
		}

		&-label {
			letter-spacing: 0.04em;
		}

		&--on {
			background: var(--color-accent);
			border-color: var(--color-accent);
			color: #fff;
			padding: 0 6px 0 14px;
			flex-direction: row-reverse;

			.sns-link__toggle-knob {
				background: #fff;
			}
		}

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

		&:not(.sns-link__toggle--disabled):hover {
			border-color: var(--color-accent);
		}
	}

	.sns-link__dialog {
		max-width: 440px;
	}

	.sns-link__dialog-cancel,
	.sns-link__dialog-confirm {
		padding: 8px 16px;
		border-radius: 6px;
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
		border: 1px solid var(--border-default);
		transition: background 0.15s, border-color 0.15s;
	}

	.sns-link__dialog-cancel {
		background: var(--bg-page);
		color: var(--text-primary);

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

	.sns-link__dialog-confirm {
		background: #ef4444;
		border-color: #ef4444;
		color: #fff;

		&:hover:not(:disabled) {
			background: #dc2626;
			border-color: #dc2626;
		}

		&:disabled {
			opacity: 0.7;
			cursor: wait;
		}
	}
}