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

// ─────────────────────────────────────────────────────────────
// /chat — 메인 실시간 채팅 (d2-community §⑤, roomKey=main)
// 색/치수는 app/styles/tokens 변수만 사용 (하드코딩 금지)
// .main(그리드 스크롤 컨테이너)을 height:100% 로 채워 mobile/desktop 모두 전체 높이 사용
// 데스크톱 중앙 컬럼 최대폭 제한 없음 (WIDE fluid — d6 §4)
// ─────────────────────────────────────────────────────────────
#chat-room {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	padding: var(--sp-4) var(--sp-5);
	gap: var(--sp-3);

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

	.chat-room__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--sp-3);

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

	.chat-room__meta {
		display: flex;
		align-items: center;
		gap: var(--sp-4);
		font-size: var(--fs-sm);
		color: var(--text-secondary);
	}

	.chat-room__count {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		font-variant-numeric: tabular-nums;
	}

	.chat-room__state {
		color: var(--text-muted);

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

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

	.chat-room__notice {
		display: flex;
		align-items: center;
		gap: var(--sp-3);
		padding: var(--sp-3) var(--sp-4);
		background: var(--bg-subtle);
		border: 1px solid var(--border-default);
		border-radius: var(--radius);
		font-size: var(--fs-sm);
		color: var(--text-secondary);

		svg {
			flex-shrink: 0;
			color: var(--az-accent);
		}
	}

	.chat-room__body {
		position: relative;
		display: flex;
		flex: 1;
		min-height: 0;
	}

	.chat-room__messages {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		padding: var(--sp-3);
		background: var(--bg-elevated);
		border: 1px solid var(--border-default);
		border-radius: var(--radius);
	}

	.chat-room__empty {
		padding: var(--sp-6) var(--sp-4);
		text-align: center;
		font-size: var(--fs-sm);
		color: var(--text-muted);
	}

	.chat-room__message {
		display: flex;
		align-items: baseline;
		gap: var(--sp-3);
		padding: var(--sp-2) var(--sp-3);
		font-size: var(--fs-base);
		line-height: 1.5;
		border-radius: var(--radius);

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

	.chat-room__time {
		flex-shrink: 0;
		font-size: var(--fs-2xs);
		color: var(--text-muted);
		font-variant-numeric: tabular-nums;
	}

	.chat-room__badge {
		flex-shrink: 0;
		align-self: center;
		width: var(--sp-5);
		height: var(--sp-5);
		object-fit: contain;
	}

	.chat-room__name {
		flex-shrink: 0;
		font-weight: 600;
		color: var(--title-color, var(--text-secondary));
	}

	.chat-room__content {
		color: var(--text-primary);
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	// 시스템 메시지 — 일반 메시지와 스타일 구분
	.chat-room__system {
		padding: var(--sp-2) var(--sp-3);
		text-align: center;
		font-size: var(--fs-xs);
		font-style: italic;
		color: var(--text-muted);
	}

	// "새 메시지 ↓" 점프 버튼 — 위로 스크롤 중 새 메시지 도착 시 노출
	.chat-room__jump {
		position: absolute;
		bottom: var(--sp-4);
		left: 50%;
		transform: translateX(-50%);
		display: inline-flex;
		align-items: center;
		gap: var(--sp-2);
		padding: var(--sp-2) var(--sp-4);
		background: var(--az-accent);
		color: var(--btn-primary-text);
		font-size: var(--fs-sm);
		font-weight: 600;
		border: none;
		border-radius: var(--fs-2xl);
		cursor: pointer;
		box-shadow: 0 var(--sp-1) var(--sp-3) var(--shadow-color);

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

	.chat-room__footer {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
	}

	.chat-room__input-row {
		display: flex;
		gap: var(--sp-3);

		input {
			flex: 1;
			min-width: 0;
			padding: var(--sp-3) var(--sp-4);
			background: var(--bg-input);
			color: var(--text-primary);
			font-size: var(--fs-base);
			border: 1px solid var(--border-strong);
			border-radius: var(--radius);

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

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

		button {
			flex-shrink: 0;
			min-width: var(--sp-7);
			padding: var(--sp-3) var(--sp-5);
			background: var(--az-accent);
			color: var(--btn-primary-text);
			font-size: var(--fs-base);
			font-weight: 600;
			border: none;
			border-radius: var(--radius);
			cursor: pointer;

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

			&:disabled {
				background: var(--bg-subtle);
				color: var(--text-muted);
				cursor: not-allowed;
			}
		}
	}

	.chat-room__cooldown {
		font-variant-numeric: tabular-nums;
	}

	.chat-room__input-meta {
		display: flex;
		align-items: center;
		gap: var(--sp-4);
		font-size: var(--fs-xs);
		color: var(--text-muted);
	}

	.chat-room__cooldown-left {
		color: var(--az-accent);
		font-variant-numeric: tabular-nums;
	}

	.chat-room__counter {
		margin-left: auto;
		font-variant-numeric: tabular-nums;
	}

	// 게스트 CTA — 읽기는 가능, 입력 대신 로그인 유도
	.chat-room__guest {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--sp-3);
		padding: var(--sp-4);
		background: var(--bg-subtle);
		border: 1px solid var(--border-default);
		border-radius: var(--radius);
		font-size: var(--fs-sm);
		color: var(--text-secondary);
	}

	.chat-room__login-cta {
		padding: var(--sp-2) var(--sp-5);
		background: var(--az-accent);
		color: var(--btn-primary-text);
		font-weight: 600;
		border-radius: var(--radius);

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

	.chat-room__blocked {
		padding: var(--sp-4);
		text-align: center;
		background: var(--color-danger-bg);
		border: 1px solid var(--color-danger-border);
		border-radius: var(--radius);
		font-size: var(--fs-sm);
		color: var(--color-danger);
	}
}