ANTOOZA-FRONTEND/app/styles/community.scss

// ─────────────────────────────────────────────────────────────
// D2 커뮤니티 — 예측 배지 / 트랙레코드 배지 / $종목 태그 / 종목 토론 / 리더보드 / 트렌딩
// 토큰 변수만 사용 (색·간격·타이포). 등락엔 포인트 컬러(--az-accent) 미사용.
// ─────────────────────────────────────────────────────────────

// ── 예측 배지 (방향 + 기간 + 상태) ──
.prediction-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 2px 8px;
	border: 1px solid var(--border-strong);
	border-radius: 999px;
	font-size: var(--fs-2xs);
	line-height: 1.6;
	white-space: nowrap;
	vertical-align: middle;

	&__dir {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		font-weight: 700;
		font-variant-numeric: tabular-nums;

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

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

	&__horizon {
		color: var(--text-muted);
	}

	&__target {
		color: var(--text-secondary);
		font-variant-numeric: tabular-nums;
	}

	// 상태 점 + 라벨
	&__status {
		display: inline-flex;
		align-items: center;
		gap: 4px;
		font-weight: 600;
	}

	&__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: var(--text-muted);
	}

	&--pending &__status { color: var(--text-muted); }
	&--pending &__dot { background: var(--text-muted); }

	&--hit &__status { color: var(--price-up); }
	&--hit &__dot { background: var(--price-up); }

	&--miss &__status { color: var(--price-down); }
	&--miss &__dot { background: var(--price-down); }

	&--void &__status { color: var(--text-muted); }
	&--void &__dot { background: var(--text-muted); }

	// 상세 뷰용 확장 배지
	&--detail {
		padding: var(--sp-3) var(--sp-4);
		border-radius: 8px;
		font-size: var(--fs-sm);
		gap: var(--sp-4);
	}
}

// 상세 뷰 예측 배지 래퍼
.post-prediction {
	margin-bottom: var(--sp-4);
}

// 작은 예측 표식 (목록 행에서 아이콘만)
.prediction-tag {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: var(--fs-2xs);
	font-weight: 700;
	vertical-align: middle;

	&--up { color: var(--price-up); }
	&--down { color: var(--price-down); }
	&--flat { color: var(--text-muted); }
}

// ── 트랙레코드 등급 배지 ──
.tier-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	border: 1px solid var(--border-strong);
	font-size: var(--fs-2xs);
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	vertical-align: middle;

	&__icon {
		font-size: 0.9em;
	}

	&--none {
		color: var(--text-muted);
		border-color: var(--border-default);
	}

	&--bronze {
		color: #a15c2f;
		border-color: #a15c2f;
	}

	&--silver {
		color: #7a7f87;
		border-color: #9aa0a8;
	}

	&--gold {
		color: #b8860b;
		border-color: #d4a017;
	}

	&--goldant {
		color: #fff;
		background: linear-gradient(135deg, #d4a017, #b8860b);
		border-color: #b8860b;
	}
}

// ── $종목 태그 (본문 인라인 배지) ──
.stock-tag {
	display: inline-flex;
	align-items: baseline;
	gap: 3px;
	padding: 0 5px;
	border-radius: 4px;
	background: var(--bg-subtle-hover);
	border: 1px solid var(--border-light);
	color: var(--text-primary);
	font-size: 0.95em;
	text-decoration: none;
	white-space: nowrap;

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

	&__code {
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
		font-size: 0.85em;
	}

	&--missing {
		color: var(--text-secondary);
	}
}

// ── 종목 토론 탭 (/stock/[code]?tab=discussion) ──
.stock-discussion {
	// 통계 헤더
	&__stats {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--sp-3) var(--sp-6);
		padding-bottom: var(--sp-4);
		margin-bottom: var(--sp-4);
		border-bottom: 1px solid var(--border-default);

		span {
			font-size: var(--fs-xs);
			color: var(--text-muted);

			strong {
				color: var(--text-primary);
				font-variant-numeric: tabular-nums;
				margin-left: var(--sp-2);
			}
		}
	}

	&__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--sp-4);
		margin-bottom: var(--sp-3);
	}

	&__table {
		width: 100%;
		border-collapse: collapse;

		thead th {
			height: var(--row-h);
			padding: 0 var(--cell-px);
			font-size: var(--cell-fs);
			font-weight: 600;
			color: var(--text-muted);
			text-align: left;
			border-bottom: 1px solid var(--border-strong);

			&.stock-discussion__col--num,
			&.stock-discussion__col--num-h { text-align: center; width: 48px; }
		}

		tbody td {
			height: var(--row-h);
			padding: 0 var(--cell-px);
			font-size: var(--cell-fs);
			color: var(--text-primary);
			border-bottom: 1px solid var(--border-light);
			vertical-align: middle;
		}

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

		&-num { text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
		&-meta { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
	}

	&__subject {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		color: var(--text-primary);

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

		em { font-style: normal; }
		.stock-discussion__comments { color: var(--az-accent); font-size: 0.9em; }
	}

	&__empty,
	&__error {
		padding: var(--sp-7) var(--sp-5);
		font-size: var(--fs-base);
		color: var(--text-muted);
		text-align: center;
	}

	// mobile drop
	@media (max-width: 767.98px) {
		&__col--author,
		&__col--views { display: none; }
	}
}

// ── 종목 글쓰기 폼 (토론 탭 내) ──
.stock-write {
	margin-top: var(--sp-5);
	padding: var(--sp-5);
	border: 1px solid var(--border-default);
	border-radius: 8px;
	background: var(--bg-elevated);

	&__title {
		font-size: var(--fs-base);
		font-weight: 600;
		color: var(--text-primary);
		margin-bottom: var(--sp-4);
	}

	&__field {
		margin-bottom: var(--sp-4);

		label {
			display: block;
			font-size: var(--fs-xs);
			color: var(--text-secondary);
			margin-bottom: var(--sp-2);
		}

		input[type='text'],
		input[type='number'],
		textarea,
		select {
			width: 100%;
			padding: var(--sp-3);
			border: 1px solid var(--border-strong);
			border-radius: 6px;
			background: var(--bg-base, var(--bg-elevated));
			color: var(--text-primary);
			font-size: var(--fs-sm);

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

		textarea { min-height: 120px; resize: vertical; }
	}

	&__prediction {
		margin-top: var(--sp-4);
		padding: var(--sp-4);
		border: 1px dashed var(--border-strong);
		border-radius: 6px;
	}

	&__prediction-head {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		margin-bottom: var(--sp-4);
		font-size: var(--fs-sm);
		color: var(--text-secondary);
	}

	&__prediction-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-3);

		@media (max-width: 640px) {
			grid-template-columns: 1fr;
		}
	}

	&__actions {
		display: flex;
		justify-content: flex-end;
		gap: var(--sp-3);
		margin-top: var(--sp-4);
	}

	&__btn {
		padding: var(--sp-3) var(--sp-5);
		border-radius: 6px;
		font-size: var(--fs-sm);
		font-weight: 600;
		border: 1px solid var(--border-strong);
		background: transparent;
		color: var(--text-primary);
		cursor: pointer;

		&--primary {
			background: var(--az-accent);
			border-color: var(--az-accent);
			color: #fff;
		}

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

	&__hint {
		margin-top: var(--sp-3);
		font-size: var(--fs-2xs);
		color: var(--text-muted);
	}

	&__error {
		margin-top: var(--sp-3);
		font-size: var(--fs-xs);
		color: var(--color-danger);
	}
}

.stock-write-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	border-radius: 6px;
	font-size: var(--fs-sm);
	font-weight: 600;
	background: var(--az-accent);
	color: #fff;
	border: none;
	cursor: pointer;
}

.stock-write-login {
	margin-top: var(--sp-4);
	padding: var(--sp-4);
	font-size: var(--fs-sm);
	color: var(--text-muted);
	text-align: center;
	border: 1px dashed var(--border-default);
	border-radius: 8px;

	a { color: var(--az-accent); font-weight: 600; }
}

// ── 적중률 리더보드 (/ranking/track-record) ──
.track-leaderboard {
	padding: var(--sp-6) var(--sp-7);

	@media (max-width: 767.98px) {
		padding: var(--sp-5) var(--sp-4);
	}

	&__head {
		margin-bottom: var(--sp-5);
	}

	&__title {
		font-size: var(--fs-2xl);
		font-weight: 700;
		color: var(--text-primary);
	}

	&__subtitle {
		display: block;
		margin-top: var(--sp-2);
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	&__rank {
		font-variant-numeric: tabular-nums;
		font-weight: 700;
		color: var(--text-secondary);
	}

	&__name {
		color: var(--text-primary);

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

	&__hitrate {
		font-variant-numeric: tabular-nums;
		font-weight: 700;
		color: var(--text-primary);
	}

	&__error,
	&__empty {
		padding: var(--sp-7) var(--sp-5);
		text-align: center;
		color: var(--text-muted);
	}

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

	&__actions {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--sp-3);
		margin-top: var(--sp-5);
	}

	&__btn {
		padding: var(--sp-2) var(--sp-5);
		border: 1px solid var(--border-strong);
		border-radius: 6px;
		font-size: var(--fs-sm);
		color: var(--text-primary);

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

// ── 트렌딩 위젯 (지금 뜨는 종목) ──
.trending-widget {
	&__title {
		display: flex;
		align-items: center;
		gap: var(--sp-2);
		font-size: var(--fs-sm);
		font-weight: 700;
		color: var(--text-primary);
		margin-bottom: var(--sp-3);
	}

	&__list {
		display: flex;
		flex-direction: column;
	}

	&__item {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		padding: var(--sp-2) 0;
		border-bottom: 1px solid var(--border-light);
		font-size: var(--fs-xs);
		color: var(--text-primary);

		&:last-child { border-bottom: none; }
		&:hover { color: var(--az-accent); }
	}

	&__rank {
		width: 18px;
		text-align: center;
		font-weight: 700;
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	&__name {
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__price {
		font-variant-numeric: tabular-nums;
		color: var(--text-secondary);
	}

	&__posts {
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	&__empty {
		font-size: var(--fs-xs);
		color: var(--text-muted);
		padding: var(--sp-3) 0;
	}
}

// 프로필 트랙레코드 탭에서 상단 배지 줄
.track-summary {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);

	&__label {
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}
}