/* 전체적인 기본 스타일 설정 */
/* 상단 툴바 */
.sticky {
	position:sticky;
	top:0;
	padding:10px;
}
.sticky h1 {
	font-size:24px;
	color: #4CAF50;
	/* 상단 타이틀 색상 */
}

/* 상태 표시줄 스타일 */
#connection-status-icons {
	display:flex;
	gap:5px;
}
#connection-status-icons .status-icon {
	width:20px;
	height:20px;
	border-radius: 50%;
}

/* 슬라이더 컨트롤 패널 */
#slider-controls {
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:20px;
}

/* memo-input 스타일 */
.memo-input {
    width: 100%;  /* 입력창 너비 */
    height: 100px;  /* 기본 높이 설정 */
    padding: 10px;
    font-size: 14px;
    line-height: 1.5; /* 줄 간격 조정 */
    resize: none; /* 크기 조정 불가 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid #ddd; /* 테두리 추가 */
}

/* 텍스트 내용이 세로로 가운데 정렬되도록 */
.memo-input::placeholder {
    text-align: center;  /* 텍스트가 가운데로 정렬되도록 */
}

#loadingIndicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.8); /* 밝은 배경 반투명 */
    padding: 30px 40px;
    border-radius: 16px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}




/* 커스텀 툴팁 */
#custom-tooltip {
	background-color:#333;
	color:#fff;
	padding:10px;
	border-radius:8px;
	display:none;
	z-index: 200;
}
/* 알림 메시지 */
#custom-alert {
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background-color:#e74c3c;
	color:#f9fafb;
	/* 밝은 텍스트 */
	padding:16px 24px;
	border-radius:8px;
	z-index:200;
	font-size:14px;
	box-shadow:0 4px 12px rgba(0,0,0,0.3);
	transition:opacity 0.3s ease;
}

#field-settings-panel {
	z-index: 1000; /* 다른 요소보다 충분히 높게 설정 */
	padding: 10px;
}
/* 상단 제목 */
.sticky h1 {
	color: #f39c12;
}

/* 테이블 배경 색상 */
/* 기본 글자 색상 및 테두리 */
#market-list {
    width: 100%;
    border-collapse: collapse;
	table-layout: fixed;  /* 테이블 레이아웃을 고정 */
    font-size: 14px;
}

#market-list th,
#market-list td {
    padding: 15px 0px;
    border-top: 1px solid #cbd5e0;  /* 상단 테두리 */
    border-bottom: 1px solid #cbd5e0; /* 하단 테두리 */
    color: #1a202c; /* Gray-900 */
    box-sizing: border-box;  /* 패딩이 요소의 크기에 포함되도록 설정 */
    overflow: hidden;  /* 내용이 넘치면 숨김 */
    white-space: nowrap;  /* 텍스트가 줄 바꿈되지 않도록 설정 */
}

/* 홀수 줄: Gray-100 → Gray-200 수준 (#edf2f7) */
#market-list tr:nth-child(odd) {
    background-color: #edf2f7;
}

/* 짝수 줄: Gray-200 → Gray-300 수준 (#e2e8f0) */
#market-list tr:nth-child(even) {
    background-color: #e2e8f0;
}

/* 헤더 스타일 (라이트 모드) */
#market-list thead th {
    background-color: #edf2f7; /* Gray-100 */
    color: #2d3748; /* Gray-800 */
    font-weight: 600;
}

/* 다크 모드 대응 */
.dark #market-list th,
.dark #market-list td {
    border-color: #4a5568; /* Gray-600 */
    color: #e2e8f0; /* Gray-200 */
}

.dark #market-list tr:nth-child(odd) {
    background-color: #1c2533; /* Gray-800 */
}

.dark #market-list tr:nth-child(even) {
    background-color: #141c2c; /* Gray-900 */
}

.dark #market-list thead th {
    background-color: #141c2c; /* Gray-700 */
    color: #f7fafc; /* Gray-100 */
}



/* 필드 선택 */
#field-selector {
    width:100%;
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
	gap:8px;
	max-height:400px;
	/* 너무 길어지면 스크롤 */
	overflow-y:auto;
	padding:8px;
}
#field-selector label:hover span {
	color: #ffffff;
	/* 마우스를 올렸을 때 텍스트 색상만 바꿔줍니다 */
}

/* market-header-wrapper 헤더 디자인 */
#market-header-wrapper {
    position: relative;
    overflow: visible; /* sticky가 부모 요소에 의한 제한을 받지 않도록 설정 */
	width:100%;
	background:linear-gradient(180deg,#e2e8f0 0%,#cbd5e1 100%);
	/* 연한 회색 → 진한 회색 */
	padding:0px;
	border-radius:8px;
	box-shadow:0 4px 10px rgba(0,0,0,0.15);
	/* 그림자 조금 더 강하게 */
	margin-bottom:0px;
	transition:background 0.3s ease;
}
/* 다크 모드 지원 */
@media (prefers-color-scheme:dark) {
	#market-header-wrapper {
		background: linear-gradient(180deg,#1f2937 0%,#111827 100%);
	}
}
/* 테이블 스타일링 */
#market-list-header {
    position: sticky;
    z-index: 100;
	width:100%;
	border-collapse:collapse;
	margin:0 auto;
	background-color: transparent;
	table-layout: fixed; /* 고정된 테이블 레이아웃 적용 */
}
/* 헤더 셀 스타일 */
#market-list-header th {
    position: relative; /* resize-handle absolute 위치 기준 */
    padding-right: 5px; /* 드래그 영역을 위한 공간 추가 */
	background:linear-gradient(180deg,#b0b6c0 0%,#9ca3af 100%);
	/* 밝은 회색 → 중간 회색 */
	color:#111827;
	padding:15px 5px;
	text-align: center;
	font-weight:600;
	font-size:12px;
	border:none;
    white-space: nowrap;
	transition:background 0.1s ease;
	box-sizing: border-box;  /* 패딩이 요소의 크기에 포함되도록 설정 */
	max-width: 100px;
}
/* 다크 모드 헤더 스타일 */
@media (prefers-color-scheme:dark) {
	#market-list-header th {
		background:linear-gradient(180deg,#374151 0%,#1f2937 100%);
		color: #e5e7eb;
	}
}
/* 헤더 셀 hover */
#market-list-header th:hover {
	background:linear-gradient(180deg,#9ca3af 0%,#6b7280 100%);
	/* hover 시 더 진한 그라디언트 */
	cursor:pointer;
}
/* 다크 모드 헤더 hover */
@media (prefers-color-scheme:dark) {
	#market-list-header th:hover {
		background: linear-gradient(180deg,#4b5563 0%,#374151 100%);
	}
}
/* 테이블 바디 셀 스타일 */
#market-list-header td {
	padding:12px 20px;
	font-size:13px;
	border-top:1px solid #d1d5db;
	transition: background-color 0.3s ease;
}
/* 다크 모드 바디 셀 스타일 */
@media (prefers-color-scheme:dark) {
	#market-list-header td {
		border-top:1px solid #374151;
		color: #d1d5db;
	}
}
/* 마지막 행 */
#market-list-header tr:last-child td {
	border-bottom: none;
}

#market-list-container {
    scroll-behavior: smooth;
    z-index: 0; /* header가 다른 요소 위로 올라가도록 설정 */
    overflow-x: auto; /* 스크롤 가능하도록 설정 */
    overflow-y: hidden;       /* 수직 스크롤 강제 제거 */
    scrollbar-width: none;    /* Firefox용 */
}

/* 알림 기능 */
#authErrorOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* 어두운 반투명 배경 */
    backdrop-filter: blur(2px);     /* 배경 흐리기 */
    display: none;
    z-index: 9998;
}

#authError {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    max-width: 400px;
    background-color: #be7373; /* red-400 */
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: bold;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

thead {
    position: sticky;
    top: 72px; /* 기존 top 값과 일치해야 함 */
    z-index: 30; /* 충분히 큰 값으로 설정 */
}





/* MAP 박스 */
#lowest-map-box * {
    margin: 0;
    padding: 0;
    line-height: 2;
    vertical-align: middle;
}

#lowest-map-box {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #ffffff;
    color: #333;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 15px 20px;
    width: 240px;
    font-family: 'Segoe UI', sans-serif;
    z-index: 1000;
    display: none;
    transition: opacity 0.5s ease;
}

#lowest-map-box h4 {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: bold;
    color: #2a4365;
}

#lowest-map-box .map-coin-info {
    margin-bottom: 12px;
    font-size: 14px;
}

#lowest-map-box .map-coin-info span {
    display: block;
    margin: 4px 0;
}

#lowest-map-box .map-coin-change {
    font-weight: bold;
}

#lowest-map-box .positive {
    color: #228B22; /* 초록색 */
}

#lowest-map-box .negative {
    color: #B22222; /* 빨간색 */
}

#lowest-map-box .map-close-button {
    position: absolute;
    top: 6px;
    right: 10px;
    background: none;
    border: none;
    font-size: 16px;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s ease;
}
#lowest-map-box .map-close-button:hover {
    color: #333;
}

/* 처음에는 투명하고 위에 위치 */
.notice-enter {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 1.0s ease;
}

/* 표시될 때는 아래로 이동 + 불투명 */
.notice-enter-active {
    opacity: 1;
    transform: translateY(0);
}

#top-notice-container {
    margin-top: 55px; /* 원하는 만큼 간격을 조정 */
	z-index: 200;
	max-width: 100%; /* 또는 원하는 값 */
    width: 60%;     /* 전체 너비로 확장 */
	height: 20px;
	padding: auto;
    justify-content: center; /* 수평 중앙 정렬 */
    align-items: center;     /* 수직 가운데 (필요시) */
}