/* ===== 트레이딩헬퍼 디자인 (new.png) ===== */
/* 랭킹 페이지: 프로필 이미지 8px 라운드 채우기 */
#rankingListBody div[class*="rounded"] img,
#inPageRankingListBody div[class*="rounded"] img,
#inPageRankingTop3 div[class*="rounded"] img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 8px;
}
#top3AvatarBox1 img,
#top3AvatarBox2 img,
#top3AvatarBox3 img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 8px;
}
body.page-futures #hd {
	background: #000;
}
/* 전체 페이지 높이 설정 */
body.page-futures,
body.page-futures #wrapper,
body.page-futures #container {
	height: 100%;
	min-height: 100vh;
	overflow: hidden;
}
.futures-theme {
	background-color: #1A1A2E;
	height: 100%;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.futures-theme .futures-header,
.futures-theme .futures-warning-banner,
.futures-theme .futures-bottom-nav,
.futures-theme .futures-chat-input-area {
	flex-shrink: 0;
}
.futures-theme .futures-bottom-nav ul {
	-webkit-overflow-scrolling: touch;
}
.futures-bottom-nav {
	background-color: #0c0546 !important;
	color: #fff;
}
/* 선택된 탭 표시: 주문 탭은 아래 규칙으로 노란색 */
.futures-nav-item[data-tab="2"] {
	background-color: #eab308 !important;
	color: #111827 !important;
}
.futures-chat-header {
	background-color: #f3f4f6;
}
.futures-chat-avatars {
	background-color: #f9fafb;
}
/* 채팅 영역 최적화: flex 영역이 입력창 위로 제한, 스크롤 정상 동작 */
.futures-theme #tabsContentWrapper {
	flex: 1 1 0;
	min-height: 0;
}
.futures-theme .futures-chat-panel {
	flex: 1 1 0;
	min-height: 0;
}
.futures-theme #chat_list {
	-webkit-overflow-scrolling: touch;
	padding-bottom: 120px !important; /* 채팅 입력창(fixed)에 가려지지 않도록 여유 공간 */
	box-sizing: border-box;
}
/* 채팅 입력 푸터: 화면 하단 고정 (항상 노출) */
#chat-input-footer {
	display: flex !important;
	position: fixed !important;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 90;
	flex-shrink: 0;
	align-items: center;
	gap: 8px;
	padding: 12px;
	padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
	background: #f9fafb;
	border-top: 1px solid #e5e7eb;
}
#chat-input-footer #input_box {
	width: auto !important;
	height: 40px !important;
	padding-right: 12px !important;
	box-sizing: border-box;
}
#chat-input-footer #input_button {
	position: static !important;
	display: inline-flex !important;
	visibility: visible !important;
	min-width: 56px;
	height: 40px !important;
	line-height: 1;
	padding: 0 16px !important;
	background-color: #2563eb !important;
	color: #fff !important;
	border-radius: 8px;
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
}
#chat_list li {
	color: #374151;
	font-size: 13px;
	padding: 6px 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
}
#chat_list .chat-msg-body {
	color: #374151;
}
#chat_list .chat-system-message .chat-msg-body {
	color: #6b7280;
}
/* 채팅 왼쪽 프로필 이미지: 원형에 맞게 표시 */
.chat-avatar-img,
.chat-avatar-wrap .chat-avatar-img {
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.chat-avatar-img img,
.chat-avatar-wrap .chat-avatar-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}
/* #chatAvatarList: 너비 4rem, 스크롤바 비노출로 가시성 확보 */
#chatAvatarList {
	width: 4rem;
	min-width: 4rem;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
#chatAvatarList::-webkit-scrollbar {
	display: none;
}
#chatAvatarList .chat-avatar-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	border-radius: 8px;
}
/* 채팅창 왼쪽 유저 프로필 목록: 8px 라운드 + 연한 파란 테두리 */
#chatAvatarList .chat-avatar-img,
#chatAvatarList .chat-avatar-box {
	border-radius: 8px;
	border: 2px solid rgba(96, 165, 250, 0.5);
	box-sizing: border-box;
}
#chatAvatarList > div {
	flex-shrink: 0;
	margin-bottom: 6px;
}
/* 채팅 공지 상단 고정 카드 */
.chat-notice-box {
	word-break: keep-all;
}
/* 채팅 주문 알림: 아바타+닉네임, 말풍선(종목/롱·숏/레버리지) + 진입가 오른쪽 */
.chat-order-entry,
.chat-trade-notification {
	list-style: none;
}
.chat-trade-bubble {
	word-break: keep-all;
	box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.chat-order-card {
	word-break: keep-all;
	background-color: #f0fdf4 !important;
	border-color: #bbf7d0 !important;
}
/* 채팅창 알림 (주문 체결·포지션 청산) */
.chat-alert {
	list-style: none;
}
.chat-avatar-item {
	transition: all 0.2s ease;
}
.chat-avatar-item:hover {
	transform: scale(1.05);
}
#chat_list .chat-level-badge {
	display: inline-block;
	background: #eab308;
	color: #111;
	padding: 1px 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: bold;
	margin-right: 6px;
}
/* 선물 메시지: 노란 박스 + 금액 빨간색 (디자인 동일) */
#chat_list .chat-msg-gift {
	background: linear-gradient(180deg, #fef9c3 0%, #fef08a 100%);
	color: #111;
	border-radius: 8px;
	padding: 10px 12px;
	margin: 6px 0;
	border: 1px solid rgba(234,179,8,0.3);
}
#chat_list .chat-msg-gift .gift-amount,
#chat_list .chat-msg-gift b.text-red-600 {
	color: #dc2626 !important;
	font-weight: bold;
}
#chat_list .chat-msg-notice {
	background: rgba(255,255,255,0.12);
	color: #ef4444;
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 12px;
	margin: 4px 0;
}

.tradeTab li {
	padding-bottom: 2px;
	cursor:pointer;
}

.tradeTab .on {
	color: #f97316;
	position: relative;
}

.futuresScroll::-webkit-scrollbar {
  display: none;
}

.tradeTab .on:after {
	content: "";
	position:absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 2px;
	background: #f97316;
}

.focusInputBox {
	background: rgb(243 244 246);
	border: 1px solid rgb(209 213 219);
	padding: 8px;
	color: rgb(17 24 39);
	width: 100%;
	border-radius: 6px;
}
.dark .focusInputBox {
	background: rgb(55 65 81);
	border-color: rgb(75 85 99);
	color: rgb(255 255 255);
}

.tabsBoxBtn.on {
	color: #f97316;
}

.tabsBoxBtn svg {
	fill: #000;
}

.dark .tabsBoxBtn svg {
	fill: #fff;
}



.tabsBoxBtn.on svg {
	fill: #f97316;
}

.focusInputBox::-webkit-outer-spin-button,
.focusInputBox::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.focusInputBox:focus {
	outline: none;
	border: 1px solid #f97316;
}

.calculationBox:focus {
	fill: #f97316;
}

.radioBox {
	display:none !important;
}

.radioBox + label {
	width: 100%;
	display: inline-block;
	text-align: center;
	height: 40px;
	line-height: 40px;
	border: 1px solid #e5e7eb;
	font-size: 14px;
	
}

.radioBox:checked + label {
	border: 1px solid #f97316;
	color : #f97316;
}

[type="range"] {
    appearance: none;
    cursor: pointer;
    outline: none;
    width: 100%;
    height: 1rem; /* thumb의 height와 일치 */
    margin: 0; /* reset margin */
    padding: 0; /* reset padding */
    background-color: transparent;
}

/* thumb */
[type="range"]::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    appearance: none;
    width: 0.7rem; /* height와 일치 */
    height: 0.7rem;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.15s ease-in-out;
    margin-top: calc((0.4rem - 0.7rem) * 0.5); /* calc((track의 height - thumb의 height) * 0.5) */
	border: 1px solid #000;
}
[type="range"]::-moz-range-thumb { /* 파이어폭스 */
    appearance: none;
    width: 1rem; /* height와 일치 */
    height: 1rem;
    border: none;
    border-radius: 50%;
    background-color: #fff;
    transition: all 0.15s ease-in-out;
	border: 1px solid #000;
}
[type="range"]:focus::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 116, 117, .4);
}
[type="range"]:focus::-moz-range-thumb { /* 파이어폭스 */
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 116, 117, .4);
}
[type="range"]::-webkit-slider-thumb:active { /* Webkit 기반 브라우저 */
    background-color: #99c7c7;
}
[type="range"]::-moz-range-thumb:active { /* 파이어폭스 */
    background-color: #99c7c7;
}

/* track */
[type="range"]::-webkit-slider-runnable-track { /* Webkit 기반 브라우저 */
    cursor: pointer;
    width: 100%;
    height: 0.4rem;
    background-color: #d87c16;
    border-radius: 0.25rem;
}
[type="range"]::-moz-range-track { /* 파이어폭스 */
    cursor: pointer;
    width: 100%;
    height: 0.4rem;
    background-color: #d87c16;
    border-radius: 0.25rem;
}

/* disabled 속성 적용 시 */
[type="range"]:disabled::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
    pointer-events: none;
    background-color: #8b9aa7;
}
[type="range"]:disabled::-moz-range-thumb { /* 파이어폭스 */
    background-color: #8b9aa7;
}
.s_c {
	color:#ef4444;
	position:relative;
	padding-right: 14px;
}

.b_c {
	color:#16a34a;
	position:relative;
	padding-right: 14px;
}

.s_c.Up:after {
	content: "↑";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right:0;
	font-weight: bolder;
}

.s_c.Down:after {
	content: "↓";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right:0;
	font-weight: bolder;
}

.b_c.Up:after {
	content: "↑";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right:0;
	font-weight: bolder;
}

.b_c.Down:after {
	content: "↓";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right:0;
	font-weight: bolder;
}

.s_cl {
	color:#ef4444;
	position:relative;
	padding-left: 14px;
}

.b_cl {
	color:#16a34a;
	position:relative;
	padding-left: 14px;
}

.s_cl.Up:after {
	content: "↑";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left:0;
	font-weight: bolder;
}

.s_cl.Down:after {
	content: "↓";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left:0;
	font-weight: bolder;
}

.b_cl.Up:after {
	content: "↑";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left:0;
	font-weight: bolder;
}

.b_cl.Down:after {
	content: "↓";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left:0;
	font-weight: bolder;
}

.Buys {
	background: #335033;
}

.Sells {
	background: #48282c;
}

.BuyText {
	color: #22c55e;
}

.SellText {
	color: #ef4444;
}

.perBtn.on {
	background:#f97316;
	color: #fff;
	font-weight: bolder;
}

.perBtn2.on {
	background:#f97316;
	color: #fff;
	font-weight: bolder;
}

.perBtn3.on {
	background:#f97316;
	color: #fff;
	font-weight: bolder;
}

.leftBar {
	position: relative;
}

.leftBar:after {
	content: "";
	width: 3px;
	height: 16px;
	position: absolute;
	top: 50%;
	left: 8px;
	transform: translateY(-50%);
}

.leftBar.leftBuy:after {
	background: #16a34a;
}

.leftBar.leftSell:after {
	background: #ef4444;
}

.rightBar:after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 14px;
	border-right: 1px solid #e5e7eb;
	right: -5px;
}

.orderBookTypeBox {
	padding-top: 10px;
}

.orderBookTypeBox a {
	width: 18px;
    height: 18px;
	background-size: 72px 18px;
	display: block;
	background: url(../img/Ico.png);
	margin: 0 2px;
	opacity: 0.4;
	cursor:pointer;
}

.orderBookTypeBox a.on {
	opacity: 1;
}

.orderBookTypeBox a:nth-child(1) {
    background-position: -1px -1px;
}

.orderBookTypeBox a:nth-child(2) {
    background-position: -21px -1px;
}

.orderBookTypeBox a:nth-child(3) {
    background-position: -41px -1px;
}

.orderBookTypeBox a:nth-child(4) {
    background-position: -61px -1px;
}

.addPriceType {
	display:none !important;
}

.addPriceType + label {
	color: #fff;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
	display: inline-block;
	font-weight: bolder;
}

.addPriceType:checked + label {
	border-bottom: 2px solid #d87c16;
}

.addPriceTable th {
	border: 1px solid #e5e7eb;
    padding: 0px 10px;
    width: 30%;
    height: 35px;
    line-height: 35px;
    font-weight: 400;
    font-size: 13px;
    text-align: left;
    background: #3335;
    color: #9ca3af;
}

.addPriceTable td {
	border: 1px solid #e5e7eb;
    padding: 0px 10px;
    width: 70%;
    height: 35px;
    line-height: 35px;
    font-weight: 400;
    font-size: 13px;
	background: #3338;
    text-align: right;
}

/* 주문 팝업: 화면 가운데 표시 (주문내역 팝업과 동일) */
#orderPopup.order-popup-overlay {
	align-items: center;
	justify-content: center;
}
#orderPopup .order-popup-box {
	width: 100%;
	max-width: 32rem;
	max-height: 90vh;
	border-radius: 0.75rem;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
	animation: orderPopupFadeIn 0.25s ease-out;
}
@keyframes orderPopupFadeIn {
	from {
		transform: scale(0.96);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}
#orderPopup .order-popup-inner .tabsBox > .flex {
	min-height: 360px;
	flex-wrap: nowrap;
}
#orderPopup .order-popup-inner .tabsBox .flex > div {
	background: rgba(31, 41, 55, 0.95);
	border-color: rgba(255,255,255,0.1);
	min-width: 0;
}
/* 미니 팝업 내 주문 입력/호가창 비율 조정 */
#orderPopup .order-popup-inner .tabsBox .flex > div:first-child {
	width: 52%;
	flex-shrink: 0;
}
#orderPopup .order-popup-inner .tabsBox .flex > div:last-child {
	width: 48%;
	flex-shrink: 0;
}

/* 주문창 팝업 하단: 포지션 / 미체결내역 탭 버튼 */
#orderPopup .order-popup-below-tab {
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}
#orderPopup .order-popup-below-pane.hidden {
	display: none !important;
}
#orderPopup .order-popup-below-pane.flex {
	display: flex !important;
}
/* 주문창 팝업 내 포지션 탭 스타일 */
#orderPopup #orderPopupPositionList ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
#orderPopup #orderPopupPositionList li {
	border-color: rgba(255,255,255,0.1);
	padding: 12px;
	margin-bottom: 8px;
	border-radius: 8px;
	background: rgba(255,255,255,0.03);
}
#orderPopup #orderPopupPositionList .text-black {
	color: #e5e7eb;
}
#orderPopup #orderPopupPositionList .text-\[\#9ca3af\] {
	color: #9ca3af;
}
/* 주문칸 밑에 포지션/거래내역 항상 노출 (한 스크롤) */
#orderPopup .order-popup-order-area {
	min-height: 320px;
}
/* 주문 팝업 하단: 포지션 | 미체결내역 항상 노출 */
#orderPopup .order-popup-below {
	min-height: 220px;
	max-height: 42vh;
	border-top: 1px solid rgba(255,255,255,0.08);
	display: flex;
	flex-direction: column;
}
#orderPopup .order-popup-below .order-popup-sub-content {
	min-height: 160px;
}
#orderPopup .order-popup-sub-content {
	min-height: 160px;
}
/* 주문창 팝업 내 서브 탭: 포지션 | 현재 주문 | 거래 내역 */
#orderPopup .order-popup-sub-tabs .order-popup-sub-tab {
	cursor: pointer;
	transition: all 0.2s;
}
#orderPopup #orderPopupNoListContainer tr {
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
#orderPopup #orderPopupNoListContainer td {
	padding: 8px 4px;
}
#orderPopup #orderPopupHistoryContainer table {
	width: 100%;
	min-width: 500px;
	border-collapse: collapse;
}
#orderPopup #orderPopupHistoryContainer th,
#orderPopup #orderPopupHistoryContainer td {
	padding: 6px 4px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	text-align: left;
}

/* 매수/롱 · 매도/숏 버튼 색상 명확 구분 (주문창·팝업 공통) */
.order-btn-buy {
	background-color: #16a34a !important;
	color: #fff !important;
}
.order-btn-buy span,
.order-btn-buy b {
	color: #fff !important;
}
.order-btn-buy:hover {
	background-color: #15803d !important;
	filter: brightness(1.05);
}
.order-btn-sell {
	background-color: #dc2626 !important;
	color: #fff !important;
}
.order-btn-sell span,
.order-btn-sell b {
	color: #fff !important;
}
.order-btn-sell:hover {
	background-color: #b91c1c !important;
	filter: brightness(1.05);
}

/* ===== 랭킹 페이지: Glassmorphism & Neon ===== */
#ranking-container.futures-theme {
	background: linear-gradient(180deg, #0f0f23 0%, #0a0a12 50%, #000000 100%) !important;
	min-height: 100vh;
}
#ranking-container .ranking-top3-card {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}
#ranking-container .ranking-top3-gold {
	border: 2px solid transparent;
	background: linear-gradient(rgba(255,255,255,0.06), rgba(255,255,255,0.06)) padding-box,
	            linear-gradient(135deg, #ffd700, #ffec8b, #ffd700) border-box;
	box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 0 0 40px rgba(255, 215, 0, 0.15);
}
#ranking-container .ranking-top3-silver {
	border: 1px solid rgba(192, 192, 192, 0.5);
	box-shadow: 0 0 18px rgba(192, 192, 192, 0.35), 0 0 30px rgba(192, 192, 192, 0.12);
}
#ranking-container .ranking-top3-bronze {
	border: 1px solid rgba(205, 127, 50, 0.5);
	box-shadow: 0 0 18px rgba(205, 127, 50, 0.35), 0 0 30px rgba(205, 127, 50, 0.12);
}
#ranking-container .ranking-crown-img {
	position: absolute;
	z-index: 10;
	pointer-events: none;
}
#ranking-container .ranking-medal-img {
	pointer-events: none;
}
#ranking-container #rankingTop3 .ranking-value,
#ranking-container .ranking-list-value {
	font-family: 'Oswald', 'Roboto', sans-serif;
	font-weight: 700;
}
#ranking-container #rankingTop3 .ranking-value {
	font-size: 1.2em;
}
#ranking-container #rankingTop3 [id^="top3Nick"] {
	font-weight: 700;
	color: #fff;
}
#ranking-container #rankingList {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}
#ranking-container #rankingListBody {
	display: flex;
	flex-direction: column;
	gap: 0;
}
#ranking-container .ranking-list-row {
	margin-bottom: 8px;
	transition: background 0.2s ease, transform 0.2s ease;
	border-radius: 8px;
}
#ranking-container .ranking-list-row:last-child {
	margin-bottom: 0;
}
#ranking-container .ranking-list-row:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	transform: translateX(5px);
}
#ranking-container .ranking-list-value small {
	font-size: 0.85em;
	opacity: 0.9;
}