@charset "UTF-8";

:root {
	--scroll-bg: transparent;
	--color-DisableText: #999;
	--scroll-color: var(--color-DisableText);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-color: var(--scroll-color) var(--scroll-bg);
}

*::-webkit-scrollbar {
	width: 8px;
	background: var(--scroll-bg);
}

*::-webkit-scrollbar-thumb {
	background-color: var(--scroll-color);
	border-radius: 4px;
}

body {
	font-family: sans-serif;
	padding-top: 80px;
	box-sizing: border-box;
	background-color: #1E2026; /* 어두운 배경 */
	color: #EAECEF; /* 기본 글자색 */
}

.main-container {
	display: flex;
	height: 100%;
	background-color: #1E2026;
}

.chart-section {
	border: 1px solid #333;
	border-radius: 12px;
	padding: 10px;
}

.left-container {
	display: flex;
	flex-direction: column;
	width: 20%;
	height: calc(100vh - 80px); /* 헤더 고려 */
	gap: 10px;
}

.right-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 25%;
	background-color: #1E2026;
	color: #EAECEF;
	padding: 10px;
	height: auto;
}

.orderbook-area {
	padding: 10px;
	margin: 1px;
	width: 100%;
	border: 1px solid #333;
	border-radius: 10px;
}

.history-section {
	padding: 10px;
	margin: 1px;
	width: 100%;
	border: 1px solid #333;
	border-radius: 10px;
}

.chat-area {
	width: 100%;
	background-color: #1E2026;
	color: #EAECEF;
	padding: 10px;
	display: flex;
	flex-direction: column;
	border: 1px solid #333;
	border-radius: 10px;
}

.chart-area {
	width: 55%;
	padding: 10px;
}

.btn {
	padding: 6px 12px;
	border: 1px solid #444;
	background-color: #333;
	color: #EAECEF;
	cursor: pointer;
}

/* tick size dropdown */
#tick-size {
	width: 70px;
	margin: 4px 0;
	padding: 2px 20px 2px 6px;
	background: #1e1e1e;
	color: #EAECEF;
	border: 1px solid #444;
	border-radius: 4px;
	appearance: none;
	font-size: 12px;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23FCD535' d='M4 6l4 4 4-4H4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
}

#tick-size::-ms-expand {
	display: none;
}

/* ✅ 차트 아래 바이낸스 스타일 매수/매도 UI */
.order-panel {
	display: flex;
	justify-content: space-between;
	gap: 4%;
	margin-top: 20px;
	padding: 20px;
	background-color: #1E2026;
	border: 1px solid #333;
	border-radius: 12px;
	width: 100%;
	box-sizing: border-box;
	align-items: flex-start;
	flex-wrap: wrap;
}

@media ( max-width : 768px) {
	@media ( min-width : 1280px) and (max-width: 1919px) {
		.chat-area {
			width: 20%;
		}
		.chart-area {
			width: 55%;
		}
		.orderbook-area {
			width: 25%;
		}
	}
	@media ( min-width : 1920px) and (max-width: 2559px) {
		body {
			font-size: 1.1rem;
		}
	}
	@media ( min-width : 2560px) and (max-width: 3839px) {
		body {
			font-size: 1.25rem;
		}
	}
	@media ( min-width : 3840px) {
		body {
			font-size: 1.5rem;
		}
	}

	/* MA선 표시용 체크박스 */
	#toggle-ma {
		appearance: none;
		width: 18px;
		height: 18px;
		border: 1px solid #555;
		border-radius: 4px;
		background: #1e1e1e;
		vertical-align: middle;
		cursor: pointer;
		position: relative;
		margin-right: 6px;
	}
	#toggle-ma:checked::after {
		content: "\2714";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 14px;
		color: #FCD535;
	}

	/* 반응형: 화면이 좁아지면 왼쪽 채팅 영역 숨김 */
	@media ( max-width : 1000px) {
		.chat-area {
			display: none;
		}
		.chart-area {
			width: 65%;
		}
		.trade-area {
			width: 35%;
		}
	}

	/* 더 좁은 화면에서는 오른쪽 영역도 숨김 */
	@media ( max-width : 600px) {
		.trade-area {
			display: none;
		}
		.chart-area {
			width: 100%;
		}
	}
	#mini-wallet {
		background: #1E2026;
		border: 1px solid #333;
		padding: 15px;
		margin-top: 10px; /* 커뮤니티창과 분리되는 여백 */
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	}
	.divider-line {
		height: 1px;
		background-color: #444;
		margin: 20px 0;
		opacity: 0.6;
	}
}