ANTOOZA-FRONTEND/app/(main)/paper/style.scss

// ─────────────────────────────────────────────────────────────
// 모의투자(Paper Trading) 공용 스타일 — /paper, /paper/trade, /paper/portfolio, /paper/leaderboard + 프로필 성적 탭
// D6 디자인 토큰만 사용 (색 하드코딩 금지). BEM 네이밍.
// ─────────────────────────────────────────────────────────────

.paper {
	max-width: 960px;
	margin: 0 auto;
	padding: 16px 16px 40px;

	&__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 4px;
	}

	&__title {
		font-size: 1.5rem;
		font-weight: 800;
		color: var(--fg-default);
	}

	&__subtitle {
		font-size: 0.8125rem;
		color: var(--text-muted);
	}

	// ── 페이지 내 서브 네비 (홈·주문·포트폴리오·리더보드) ──
	&__nav {
		display: flex;
		gap: 4px;
		flex-wrap: wrap;
		margin: 12px 0 20px;
		border-bottom: 1px solid var(--border-default);
	}

	&__nav-link {
		padding: 10px 16px;
		font-size: 0.9375rem;
		font-weight: 600;
		color: var(--text-muted);
		text-decoration: none;
		border-bottom: 3px solid transparent;
		margin-bottom: -1px;

		&:hover {
			color: var(--fg-default);
		}

		&--active {
			color: var(--fg-default);
			border-bottom-color: var(--az-accent);
		}
	}

	// ── 계좌 카드 ──
	&__account-card {
		border: 1px solid var(--border-default);
		border-radius: 12px;
		background: var(--bg-card);
		padding: 20px;
		margin-bottom: 20px;
	}

	&__metrics {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 16px;
	}

	&__metric {
		display: flex;
		flex-direction: column;
		gap: 4px;
	}

	&__metric-label {
		font-size: 0.75rem;
		color: var(--text-muted);
	}

	&__metric-value {
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--fg-default);
		font-variant-numeric: tabular-nums;
	}

	// ── 계좌 액션 버튼 ──
	&__actions {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
		margin-top: 20px;
	}

	&__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		padding: 8px 18px;
		border-radius: 8px;
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
		border: 1px solid var(--border-strong);
		background: transparent;
		color: var(--fg-default);
		transition: background-color 0.15s ease, border-color 0.15s ease;

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

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

		&--primary {
			background: var(--btn-primary);
			border-color: var(--btn-primary);
			color: var(--btn-primary-text);

			&:hover:not(:disabled) {
				background: var(--btn-primary-hover);
				border-color: var(--btn-primary-hover);
			}
		}

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

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

		&--sm {
			padding: 4px 10px;
			font-size: 0.75rem;
			border-radius: 6px;
		}
	}

	// ── 계좌 미개설 안내 ──
	&__empty-account {
		border: 1px dashed var(--border-strong);
		border-radius: 12px;
		background: var(--bg-card);
		padding: 32px 20px;
		text-align: center;
		margin-bottom: 20px;
	}

	&__empty-account-title {
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--fg-default);
		margin-bottom: 8px;
	}

	&__empty-account-desc {
		font-size: 0.875rem;
		color: var(--text-secondary);
		line-height: 1.6;
		margin-bottom: 16px;
	}

	// ── 체결 규칙 고지 박스 ──
	&__notice {
		border: 1px solid var(--color-warning-text);
		background: var(--color-warning-bg);
		border-radius: 10px;
		padding: 14px 16px;
		margin: 20px 0;
	}

	&__notice-title {
		font-size: 0.875rem;
		font-weight: 700;
		color: var(--color-warning-text);
		margin-bottom: 6px;
	}

	&__notice-list {
		margin: 0;
		padding-left: 18px;
		font-size: 0.8125rem;
		color: var(--text-secondary);
		line-height: 1.7;
	}

	// ── 섹션 ──
	&__section {
		margin: 24px 0;
	}

	&__section-head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		margin-bottom: 12px;
	}

	&__section-title {
		font-size: 1.125rem;
		font-weight: 700;
		color: var(--fg-default);
	}

	&__section-link {
		font-size: 0.8125rem;
		color: var(--text-link);
		text-decoration: none;

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

	&__empty {
		text-align: center;
		color: var(--text-muted);
		padding: 32px 16px;
		font-size: 0.9375rem;
	}

	&__error {
		border: 1px solid var(--color-danger-border);
		background: var(--color-danger-bg);
		border-radius: 10px;
		padding: 14px 16px;
		color: var(--color-danger);
		font-size: 0.875rem;
	}

	// ── 고밀도 테이블 (포트폴리오·리더보드·주문) ──
	&__table-wrap {
		overflow-x: auto;
		border: 1px solid var(--border-default);
		border-radius: 10px;
	}

	&__table {
		width: 100%;
		border-collapse: collapse;
		font-size: 0.8125rem;
		white-space: nowrap;

		th,
		td {
			padding: 8px 12px;
			text-align: right;
			font-variant-numeric: tabular-nums;
		}

		thead th {
			background: var(--bg-subtle);
			color: var(--text-muted);
			font-weight: 600;
			border-bottom: 1px solid var(--border-default);
			position: sticky;
			top: 0;
		}

		tbody tr {
			border-bottom: 1px solid var(--border-light);

			&:last-child {
				border-bottom: none;
			}

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

		td.paper__td--left,
		th.paper__th--left {
			text-align: left;
		}

		td.paper__td--center,
		th.paper__th--center {
			text-align: center;
		}
	}

	&__stock-name {
		font-weight: 600;
		color: var(--fg-default);
	}

	&__stock-code {
		font-size: 0.6875rem;
		color: var(--text-muted);
		margin-left: 6px;
	}

	// ── 상태 뱃지 ──
	&__badge {
		display: inline-block;
		padding: 1px 8px;
		border-radius: 999px;
		font-size: 0.6875rem;
		font-weight: 600;
		border: 1px solid var(--border-strong);
		color: var(--text-secondary);

		&--buy {
			color: var(--price-up);
			border-color: var(--price-up);
		}

		&--sell {
			color: var(--price-down);
			border-color: var(--price-down);
		}

		&--pending {
			color: var(--color-warning-text);
			border-color: var(--color-warning-text);
		}

		&--filled {
			color: var(--color-success);
			border-color: var(--color-success);
		}

		&--cancelled {
			color: var(--text-muted);
			border-color: var(--border-strong);
		}

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

	// ── 값 색 (수익/손실) ──
	&__value--up {
		color: var(--price-up);
	}

	&__value--down {
		color: var(--price-down);
	}

	&__value--flat {
		color: var(--price-flat);
	}

	// ── 탭 (리더보드 정렬·기간) ──
	&__tabs {
		display: flex;
		gap: 6px;
		flex-wrap: wrap;
		margin-bottom: 12px;
	}

	&__tab {
		padding: 6px 14px;
		border-radius: 999px;
		font-size: 0.8125rem;
		font-weight: 600;
		text-decoration: none;
		border: 1px solid var(--border-default);
		color: var(--text-secondary);
		background: transparent;

		&:hover {
			background: var(--bg-subtle);
			color: var(--fg-default);
		}

		&--active {
			background: var(--az-accent);
			border-color: var(--az-accent);
			color: var(--btn-primary-text);

			&:hover {
				background: var(--az-accent-hover);
				color: var(--btn-primary-text);
			}
		}
	}

	&__tab-group {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		margin-bottom: 8px;
	}

	&__tab-group-label {
		font-size: 0.75rem;
		color: var(--text-muted);
		min-width: 44px;
	}

	// ── 리더보드 순위·닉네임 셀 ──
	&__rank {
		font-weight: 700;
		color: var(--fg-default);
	}

	&__nick {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	&__nick-thumb {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		object-fit: cover;
		background: var(--bg-subtle);
		flex-shrink: 0;
	}

	&__nick-name {
		color: var(--fg-default);
		text-decoration: none;
		font-weight: 600;

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

	&__me-row {
		background: var(--sidebar-active-bg);
	}
}

// ── 입금/출금 모달 (base-ui Dialog Popup content 확장) ──
.paper-modal {
	&__body {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}

	&__balance {
		font-size: 0.8125rem;
		color: var(--text-secondary);

		strong {
			color: var(--fg-default);
			font-variant-numeric: tabular-nums;
		}
	}

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

	&__label {
		font-size: 0.8125rem;
		font-weight: 600;
		color: var(--fg-default);
	}

	&__input {
		padding: 10px 12px;
		border-radius: 8px;
		border: 1px solid var(--border-default);
		background: var(--bg-input);
		color: var(--fg-default);
		font-size: 0.9375rem;
		font-variant-numeric: tabular-nums;
		outline: none;

		&:focus {
			border-color: var(--az-accent);
		}
	}

	&__hint {
		font-size: 0.75rem;
		color: var(--text-muted);
	}

	&__error {
		font-size: 0.8125rem;
		color: var(--color-danger);
		margin: 0;
	}

	// suggest 드롭다운 anchor
	&__field--suggest {
		position: relative;
	}

	// 주문 폼 본문 (가용 토큰 metric 아래 간격)
	&__trade-body {
		margin-top: 16px;
	}

	&__all {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		font-size: 0.8125rem;
		color: var(--text-secondary);
		cursor: pointer;
	}

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