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

// ── 정산 공통 ──────────────────────────────────────
.settlement {
	max-width: 960px;

	// ── Summary Cards ──
	&__cards {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: 16px;
		margin-bottom: 28px;
	}

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

	&__card-label {
		display: block;
		font-size: 0.8125rem;
		color: hsl(var(--muted-foreground));
		margin-bottom: 6px;
	}

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

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

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

	// ── Account (계좌 관리) ──
	&__account-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16px;
	}

	&__account-count {
		font-size: 0.875rem;
		color: hsl(var(--muted-foreground));
	}

	&__account-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	&__account-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		padding: 20px 24px;
		background: hsl(var(--background));
		gap: 16px;
	}

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

	&__account-box {
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		padding: 24px;
		max-width: 560px;
		margin-bottom: 24px;
	}

	&__account-form-title {
		font-size: 1rem;
		font-weight: 600;
		margin-bottom: 16px;
		color: hsl(var(--foreground));
	}

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

	&__account-bank {
		font-size: 1.125rem;
		font-weight: 600;
		color: hsl(var(--foreground));
	}

	&__account-detail {
		font-size: 0.875rem;
		color: hsl(var(--muted-foreground));
	}

	&__account-status {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: 4px;
		font-size: 0.8125rem;

		&--verified {
			color: var(--color-success);
		}

		&--unverified {
			color: var(--color-warning);
		}
	}

	&__account-actions {
		display: flex;
		gap: 8px;
		flex-shrink: 0;
	}

	// ── Account Form ──
	&__form {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}

	&__field {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	&__label {
		font-size: 0.875rem;
		font-weight: 500;
		color: hsl(var(--foreground));
	}

	&__select,
	&__input {
		width: 100%;
		padding: 8px 12px;
		border: 1px solid hsl(var(--border));
		border-radius: calc(var(--radius) - 2px);
		background: hsl(var(--background));
		color: hsl(var(--foreground));
		font-size: 0.875rem;

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

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

	&__select {
		appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
		padding-right: 32px;
	}

	&__notice {
		margin-top: 4px;

		li {
			font-size: 0.8125rem;
			color: hsl(var(--muted-foreground));
			padding: 2px 0;

			&::before {
				content: '※ ';
			}
		}
	}

	&__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 10px 32px;
		border: 1px solid hsl(var(--border));
		border-radius: calc(var(--radius) - 2px);
		font-size: 0.875rem;
		font-weight: 500;
		cursor: pointer;
		background: hsl(var(--background));
		color: hsl(var(--foreground));
		transition: background-color 0.15s;

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

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

			&:hover:not(:disabled) {
				background: hsl(var(--primary) / 0.9);
			}
		}

		&--cancel {
			background: transparent;
		}

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

			&:hover:not(:disabled) {
				background: hsl(0 84% 60% / 0.1);
			}
		}

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

	// ── Tax (원천징수 내역) ──
	&__year-select {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-bottom: 20px;

		label {
			font-size: 0.875rem;
			font-weight: 500;
			color: hsl(var(--foreground));
		}

		select {
			padding: 6px 32px 6px 12px;
			border: 1px solid hsl(var(--border));
			border-radius: calc(var(--radius) - 2px);
			background: hsl(var(--background));
			color: hsl(var(--foreground));
			font-size: 0.875rem;
			appearance: none;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 10px center;
		}
	}

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

	// ── Table ──
	&__table-wrap {
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		overflow: hidden;
		margin-bottom: 24px;
	}

	&__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));
			white-space: nowrap;
		}

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

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

		td[colspan] {
			text-align: center;
		}
	}

	&__amount {
		&--plus {
			color: var(--color-success);
			font-weight: 600;
		}

		&--minus {
			color: var(--color-danger);
			font-weight: 600;
		}
	}

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

	// ── Tax Guide ──
	&__guide {
		border: 1px solid hsl(var(--border));
		border-radius: 8px;
		padding: 20px 24px;
		background: hsl(var(--muted) / 0.3);
	}

	&__guide-title {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 0.9375rem;
		font-weight: 600;
		color: hsl(var(--foreground));
		margin-bottom: 12px;
	}

	&__guide-list {
		li {
			font-size: 0.8125rem;
			color: hsl(var(--muted-foreground));
			padding: 3px 0;
			padding-left: 14px;
			position: relative;

			&::before {
				content: '·';
				position: absolute;
				left: 0;
				font-weight: 700;
			}
		}
	}

	// ── Responsive ──
	@media (max-width: 768px) {
		&__cards {
			grid-template-columns: 1fr 1fr;
		}

		&__card {
			padding: 14px;
		}

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

		&__account-box {
			max-width: none;
		}

		&__account-card {
			flex-direction: column;
			align-items: flex-start;
		}

		&__account-actions {
			width: 100%;

			.settlement__btn {
				flex: 1;
			}
		}

		&__table-wrap {
			overflow-x: auto;
		}

		&__table {
			min-width: 640px;

			th, td {
				padding: 10px 12px;
				font-size: 0.8125rem;
			}
		}

		&__guide {
			padding: 16px;
		}
	}
}