div {margin:0 0 0 0; padding: 0 0 0 0;}

/* 매수/매도 콘솔 스타일 */
#buy-console div, #sell-console div {padding: 0; margin:0;}

/* 호가창 기본 테두리 */
#hogaInfo [id*="sell-"] div{border:1px solid #f1f1f1;}
#hogaInfo [id*="buy-"] div{border:1px solid #f1f1f1;}

/* 호가창 개선된 스타일 */
#hogaInfo [id*="sell-"], #hogaInfo [id*="buy-"] {
	box-sizing: border-box;
}

#hogaInfo [id*="sell-"] [id*="-valinfo"], 
#hogaInfo [id*="buy-"] [id*="-valinfo"] {
	position: relative !important;
	height: 100% !important;
	padding-left: 5px !important;
	padding-right: 5px !important;
	box-sizing: border-box !important;
	border: none !important;
}

/* 호가 바(-bar) 스타일 */
#hogaInfo [id*="sell-"] [id*="-bar"], #hogaInfo [id*="buy-"] [id*="-bar"] { 
	top: 1px !important;
	bottom: 1px !important;
	left: 2px !important;
	right: 2px !important;
	margin: 0 !important; 
	float: none !important; 
	position: absolute !important;
	border-radius: 0 2px 2px 0 !important; 
	font-size: 0 !important; 
	line-height: 0 !important;
	box-sizing: border-box !important;
	border: none !important;
}

#hogaInfo [id*="sell-"][id*="-bar"] {
	background-color: rgba(13, 110, 253, 0.15) !important; /* 매도 바 색상 (한국식 파란색) */
}
#hogaInfo [id*="buy-"][id*="-bar"] {
	background-color: rgba(220, 53, 69, 0.15) !important; /* 매수 바 색상 (한국식 빨간색) */
}

/* 호가 수량 텍스트 스타일 */
#hogaInfo [id*="-value"] {
	position: absolute !important; 
	left: 3px !important;
	right: auto !important;
	top: 50% !important; 
	transform: translateY(-50%) !important; 
	font-size: 10px !important; 
	color: #343a40 !important;
	text-align: left !important;
	border: none !important;
	margin: 0 !important;
	float: none !important;
}

/* 호가 매물량 증감 표시 스타일 */
.hoga-change {
	position: absolute !important;
	right: 3px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 8px !important;
	font-weight: bold !important;
	text-align: right !important;
	border: none !important;
	margin: 0 !important;
	padding: 1px 2px !important;
	border-radius: 2px !important;
	opacity: 0.9 !important;
	transition: opacity 0.3s ease-in-out !important;
}

.hoga-change.increase {
	color: #fff !important;
	background-color: rgba(220, 53, 69, 0.8) !important; /* 빨간색 배경 */
}

.hoga-change.decrease {
	color: #fff !important;
	background-color: rgba(13, 110, 253, 0.8) !important; /* 파란색 배경 */
}

/* 애니메이션 효과 */
.hoga-change.fade-in {
	animation: fadeInChange 0.5s ease-in-out;
}

@keyframes fadeInChange {
	0% { opacity: 0; transform: translateY(-50%) scale(0.8); }
	50% { opacity: 1; transform: translateY(-50%) scale(1.1); }
	100% { opacity: 0.9; transform: translateY(-50%) scale(1); }
}

/* 3초 후 사라지는 효과 */
.hoga-change.fade-out {
	animation: fadeOutChange 0.5s ease-in-out forwards;
}

@keyframes fadeOutChange {
	0% { opacity: 0.9; }
	100% { opacity: 0; }
}

/* 세련된 시간 표시 스타일 */
#coin-currentTime {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
	color: white !important;
	border-radius: 12px !important;
	padding: 8px 16px !important;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
	font-weight: 500 !important;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
	position: relative !important;
	overflow: hidden !important;
	transition: all 0.3s ease !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

#coin-currentTime::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	animation: shimmer 3s infinite;
}

@keyframes shimmer {
	0% { left: -100%; }
	100% { left: 100%; }
}

.time-container {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.current-time {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.time-icon {
	width: 16px !important;
	height: 16px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 10px !important;
}

.time-value {
	font-size: 16px !important;
	font-weight: 600 !important;
	letter-spacing: 0.5px !important;
	color: white !important;
}

.market-info {
	display: flex !important;
	align-items: center !important;
	gap: 6px !important;
	font-size: 12px !important;
	opacity: 0.9 !important;
}

.market-status {
	padding: 2px 8px !important;
	background: rgba(255, 255, 255, 0.3) !important;
	border-radius: 8px !important;
	font-size: 10px !important;
	font-weight: 600 !important;
	color: white !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.progress-bar {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	height: 3px !important;
	background: rgba(255, 255, 255, 0.4) !important;
	border-radius: 0 0 12px 12px !important;
	transition: width 1s ease-in-out !important;
}

/* 시장 상태별 스타일 */
.market-status.opening {
	background: rgba(76, 175, 80, 0.6) !important;
	color: white !important;
	animation: pulse-green 2s infinite;
	border: 1px solid rgba(76, 175, 80, 0.8) !important;
}

.market-status.trading {
	background: rgba(33, 150, 243, 0.6) !important;
	color: white !important;
	border: 1px solid rgba(33, 150, 243, 0.8) !important;
}

.market-status.closing-soon {
	background: rgba(244, 67, 54, 0.6) !important;
	color: white !important;
	animation: pulse-red 1s infinite;
	border: 1px solid rgba(244, 67, 54, 0.8) !important;
}

@keyframes pulse-green {
	0%, 100% { 
		background: rgba(76, 175, 80, 0.6) !important; 
		box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
	}
	50% { 
		background: rgba(76, 175, 80, 0.8) !important; 
		box-shadow: 0 0 10px rgba(76, 175, 80, 0.7);
	}
}

@keyframes pulse-red {
	0%, 100% { 
		background: rgba(244, 67, 54, 0.6) !important; 
		box-shadow: 0 0 5px rgba(244, 67, 54, 0.5);
	}
	50% { 
		background: rgba(244, 67, 54, 0.8) !important; 
		box-shadow: 0 0 15px rgba(244, 67, 54, 0.7);
	}
}

/* 프로그레스 바 색상 변화 */
.progress-bar {
	background: linear-gradient(90deg, #4CAF50 0%, #2196F3 50%, #F44336 100%) !important;
}

.sell-chart-value, .buy-chart-value{position:absolute; float:left; top:7px; left:1px; border:none; font-size:11px; margin:0 0 0 2px;}

/* 현재 체결가격 하이라이트 - 더 세련된 디자인 */
#hogaInfo [id*="sell-"].current-price, #hogaInfo [id*="buy-"].current-price {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.03) 100%) !important;
    border-left: 4px solid #3b82f6 !important;
    border-top: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
    border-right: 1px solid rgba(59, 130, 246, 0.1) !important;
    box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.1) !important;
    position: relative !important;
    transition: all 0.3s ease-in-out !important;
}

/* 현재 체결가격 펄스 애니메이션 효과 */
#hogaInfo [id*="sell-"].current-price::before, #hogaInfo [id*="buy-"].current-price::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(59, 130, 246, 0.05);
    animation: pulse-highlight 2s ease-in-out infinite;
    pointer-events: none;
    border-radius: 2px;
}

@keyframes pulse-highlight {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* 현재 체결가격 행의 div들 스타일 조정 */
#hogaInfo [id*="sell-"].current-price div, #hogaInfo [id*="buy-"].current-price div {
    border: none !important;
    position: relative;
    z-index: 1;
}

/* 가격 텍스트 강조 */
#hogaInfo [id*="sell-"].current-price [id*="-price"] span, 
#hogaInfo [id*="buy-"].current-price [id*="-price"] span {
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.row {margin:0;}
.ui-dialog-titlebar 
{
	height: 30px;
	font-size: 12px;
	color: #666666;
	background-color: #f5eed8;
}
.ui-dialog-titlebar-close {
	visibility: hidden;
}
.gridster li {
	list-style-type: none;
	border-radius: 10px;
	
}

body {
	background-color: #f2f2f2;
}

.gridster li, .citems, #coinInfoHead {
	background-color: #fff;
}

#logInformation div {
	margin:0 0 0 0;
	padding:0 0 0 0;
}

#coinInfoHead div {
	cursor:pointer; text-align:center;font-size:11px;line-height:30px;
}
::-webkit-scrollbar-thumb {
  background-color: #bbb;
  border: 6px solid transparent;
  border-radius: 9px;
  background-clip: padding-box;  
}
::-webkit-scrollbar-track-piece:start {background: transparent;}
::-webkit-scrollbar-track-piece:end {background: transparent;}
::-webkit-scrollbar {width: 16px;}
@font-face {
     font-family: 'S-CoreDream-4Regular';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

* {font-family: 'S-CoreDream-4Regular', sans-serif; }

/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

#buyTab > a.active {
	border:none;
	color:#fff;
	background-color:#dd0000;
}

#sellTab > a.active {
	border:none;
	color:#fff;
	background-color:#0051c7;
}

#waitTab > a.active {
	border:none;
	color:#fff;
	background-color:#555;
}

/* 동시호가 패널 스타일 */
#call-auction-panel {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
	border: 2px solid #ffd700 !important;
	box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3) !important;
}

#auction-state-title {
	animation: pulse-title 2s ease-in-out infinite;
}

@keyframes pulse-title {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* 동시호가 시장 상태 스타일 */
.market-status.call-auction {
	background: rgba(255, 215, 0, 0.7) !important;
	color: #333 !important;
	animation: pulse-auction 2s infinite;
	border: 1px solid rgba(255, 215, 0, 0.9) !important;
	font-weight: bold !important;
}

.market-status.call-auction-close {
	background: rgba(255, 140, 0, 0.7) !important;
	color: white !important;
	animation: pulse-auction-close 2s infinite;
	border: 1px solid rgba(255, 140, 0, 0.9) !important;
	font-weight: bold !important;
}

.market-status.market-closed {
	background: rgba(108, 117, 125, 0.7) !important;
	color: white !important;
	border: 1px solid rgba(108, 117, 125, 0.9) !important;
}

@keyframes pulse-auction {
	0%, 100% { 
		background: rgba(255, 215, 0, 0.7) !important; 
		box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
	}
	50% { 
		background: rgba(255, 215, 0, 0.9) !important; 
		box-shadow: 0 0 20px rgba(255, 215, 0, 0.7);
	}
}

@keyframes pulse-auction-close {
	0%, 100% { 
		background: rgba(255, 140, 0, 0.7) !important; 
		box-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
	}
	50% { 
		background: rgba(255, 140, 0, 0.9) !important; 
		box-shadow: 0 0 20px rgba(255, 140, 0, 0.7);
	}
}