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

#profile {
	max-width: 1024px;
	padding: 0 32px 32px 32px;

	h1 {
		font-size: 22px;
		margin-bottom: 10px;
	}

	table {
		border: 1px solid var(--border-strong);

		caption {
			text-align: left;
			font-size: 16px;
			margin-bottom: 10px;
		}

		tbody {
			tr {
				th, td {
					text-align: left;
					font-size: 14px;
					font-weight: normal;
					padding: 8px 9px;
				}

				th {
					background: var(--bg-elevated);
					border: 1px solid var(--border-strong);
				}

				td {
					border-bottom: 1px solid var(--border-strong);

					a {
						height: min-content;
						padding: 3px 16px;
					}

					&:nth-of-type(2) {
						text-align: right;
					}
				}
			}
		}
	}

	dl {
		dt, dd {
			font-size: 14px;
		}

		dt {
			font-weight: bold;
			margin-bottom: 7px;
		}

		dd {
			margin-bottom: 2px;
		}
	}

	.profile__sns-logos {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		flex-wrap: wrap;
	}

	.profile__sns-logo {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		flex-shrink: 0;
		font-size: 14px;
		background: var(--bg-subtle);
		color: var(--text-muted);
		border: 1px solid var(--border-default);
		transition: opacity 0.15s, filter 0.15s;

		&-text {
			font-weight: 700;
			font-size: 13px;
		}

		// 미연동 / 준비중 — 회색 처리
		&--inactive,
		&--disabled {
			filter: grayscale(1);
			opacity: 0.45;
		}

		// 연동됨 (active) — provider 별 컬러
		&--connected {
			filter: none;
			opacity: 1;
		}

		&--google.profile__sns-logo--connected {
			background: #fff;
			color: #4285F4;
			border-color: #4285F4;
		}

		&--naver.profile__sns-logo--connected {
			background: #03C75A;
			color: #fff;
			border-color: #03C75A;
		}

		&--kakao.profile__sns-logo--connected {
			background: #FEE500;
			color: #3C1E1E;
			border-color: #FEE500;
		}
	}
}