@charset "UTF-8";
/* ✅ 차트 아래 바이낸스 스타일 매수/매도 UI */
.order-panel {
	display: flex;
	flex-wrap: wrap; /* 💡 작은 화면에서 자동 줄바꿈 */
	justify-content: space-between;
	gap: 20px;
	margin-top: 10px;
	padding: 10px;
	background-color: #1E2026;
	border: 1px solid #333;
	border-radius: 12px;
	width: 100%;
	box-sizing: border-box;
}

.order-box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 12px;
	height: 100%; /* 💡 비율 자동 대응 */
	flex: 1 1 300px; /* 💡 기본 폭 300px, 남는 공간 균등 분배 */
	min-width: 0;
}

.order-box>* {
	width: 100%;
}

.input-wrapper, .range-slider, .order-box>button {
	height: 40px;
	min-height: 40px;
	box-sizing: border-box;
}

.order-submit-btn {
	padding: 0 10px;
	font-weight: bold;
	font-size: 14px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: white;
	height: 40px;
	width: 100%;
}

.order-box.buy .order-submit-btn {
	background-color: #00b386;
}

.order-box.sell .order-submit-btn {
	background-color: #ff4d4f;
}

.order-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
	position: relative;
}

.mode-toggle {
	margin-left: auto;
}

.limit-switch {
	appearance: none;
	width: 36px;
	height: 20px;
	background: #444;
	border: 1px solid #666;
	border-radius: 20px;
	position: relative;
	cursor: pointer;
	outline: none;
}

.limit-switch::before {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	top: 1px;
	left: 1px;
	transition: transform 0.2s;
}

.limit-switch:checked {
	background: #00b386;
}

.limit-switch:checked::before {
	transform: translateX(16px);
}

.order-box h4 {
	margin: 0;
	font-size: 16px;
	color: #EAECEF;
}

.order-box label {
	font-size: 13px;
	margin-bottom: 4px;
}

.order-box input:not([type="range"]) {
	padding: 0;
	border-radius: 15px;
	font-size: 14px;
	/* background-color: #515151;
	color: #fff; */
}

.order-box input[type="range"] {
	padding: 0;
}

.order-box>button {
	padding: 10px;
	font-weight: bold;
	font-size: 14px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	color: white;
}

.order-box.buy>button {
	background-color: #00b386;
}

.order-box.sell>button {
	background-color: #ff4d4f;
}

input[type="range"] {
	width: 100%;
	margin-top: 4px;
	height: 6px;
	border-radius: 5px;
	background: transparent;
	accent-color: #00b386;
	position: relative;
}

/* ✅ 눈금 표시용 배경 선 추가 */
input[type="range"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background: repeating-linear-gradient(to right, #666, #666 1px, transparent 1px,
		transparent 24%);
	transform: translateY(-50%);
	z-index: -1;
	pointer-events: none;
}

.slider-marks {
	display: flex;
	justify-content: space-between;
	font-size: 12px;
	color: #ddd;
	margin-top: 4px;
	padding: 0 2px;
}
/* Binance style slider */
.bn-slider-wrapper {
	display: flex;
	position: relative;
	width: 100%;
}

.bn-slider {
	width: 100%;
	position: relative;
	height: 18px;
	background-color: transparent;
	appearance: none;
}

.bn-slider-track {
	position: relative;
	width: 100%;
	height: 2px;
	background: var(--color-Line, #2B3139);
	border-radius: 3px;
}

.bn-slider-track-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--color-primary, #0ECB81);
	border-radius: 3px;
}

.bn-slider-track-step {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.bn-slider-track-step-dot {
	width: 7px;
	height: 7px;
	background: #3b3f46;
	transform: rotate(45deg);
}

.bn-slider-handle {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	width: 12px;
	height: 12px;
	background: #181A20;
	border: 2px solid #EAECF0;
	z-index: 10;
	pointer-events: auto;
}

.bn-slider-track-step.active .bn-slider-track-step-dot {
	background: var(--color-primary, #0ECB81);
}

.range-slider {
	-webkit-appearance: none;
	width: 100%;
	height: 6px;
	background: var(--color-Line, #2B3139);
	border-radius: 3px;
	outline: none;
	margin: 2px 0;
	cursor: pointer;
}

.range-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-primary, #FCD535);
	cursor: pointer;
	margin-top: -4px;
	transition: background 0.2s ease;
}

.range-slider::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--color-primary, #FCD535);
	cursor: pointer;
}

.range-slider::-webkit-slider-runnable-track, .range-slider::-moz-range-track
	{
	height: 6px;
	background: var(--color-Line, #2B3139);
	border-radius: 3px;
}
/* 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 : 767px) {
	.order-panel {
		display: flex;
		flex-direction: row; /* ✅ 줄어들어도 좌우 배치 유지 */
		flex-wrap: nowrap; /* ✅ 줄바꿈 금지 */
		-webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
		height: auto;
		width: 100%;
		overflow-x: auto; /* ✅ ★ 이 줄 추가 ★ */
	}
	.order-box {
		flex: 1 1 0; /* ✅ 고정 크기, 자동 늘어나지 않음 */
		height: auto;
		width: 320px; /* 모바일에서 보기 적당한 크기 */
		min-width: 0;
	}
}