/* 공통 초기화 */
body, ul, li, a {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

/* 웹사이트 전체 배경색 */
body {
    background-color: #181818; /* 밝은 검정색 */
    color: white; /* 기본 텍스트 색상 */
    font-family: 'Nunito', sans-serif; /* 한국어는 여기어때 잘난체, 영어는 Nunito */
}

/* 헤더 스타일 */
.site-header {
    background-color: #000000; /* 헤더 배경색 */
    padding: 10px 20px; /* 상하좌우 여백 */
    border-radius: 0 0 10px 10px; /* 아래 양쪽 모서리를 둥글게 */
    margin: 0 auto; /* 가운데 정렬 */
    max-width: 1100px; /* 헤더가 양 끝에 닿지 않도록 */
    min-width: 1100px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* 아래 그림자 효과 */
}

/* 헤더 컨테이너 */
.header-container {
    display: flex; /* Flexbox 활성화 */
    justify-content: flex-start; /* 제목과 메뉴를 왼쪽 정렬 */
    align-items: center; /* 세로축 가운데 정렬 */
    gap: 20px; /* 제목과 메뉴 간 간격 설정 */
}

/* 제목 스타일 */
.site-title {
    font-family: 'Nunito', sans-serif; /* 제목에는 Nunito 폰트 적용 */
    font-size: 24px;
    font-weight: bold;
    color: #ffb700; /* 기본 텍스트 색상 */
    text-decoration: none; /* 밑줄 제거 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

/* 제목 마우스 오버 효과 */
.site-title:hover {
    color: #ffc400be; /* 형광 노랑색 */
}

/* 메뉴바 스타일 */
.navbar {
    display: flex; /* 메뉴를 가로로 정렬 */
}

.navbar li {
    margin: 0 5px; /* 메뉴 항목 간격 */
}

.navbar a {
    color: white; /* 기본 텍스트 색상 */
    font-size: 18px; /* 텍스트 크기 */
    font-weight: bold; /* 글자 두께 */
    padding: 5px 8px; /* 텍스트 여백 */
    position: relative; /* 마우스 오버 시 줄 표시를 위한 상대 위치 */
    text-decoration: none; /* 밑줄 제거 */
    transition: all 0.3s ease; /* 부드러운 전환 효과 */
}

/* 마우스 오버 효과: 줄이 왼쪽에서 오른쪽으로 나타남 */
.navbar a::after {
    content: ''; /* 비어있는 줄 */
    position: absolute; /* 절대 위치 */
    bottom: 0; /* 텍스트 아래에 줄 배치 */
    left: 0; /* 줄 시작점: 왼쪽 */
    width: 0; /* 초기 줄 길이 */
    height: 2px; /* 줄 두께 */
    background-color: #dadada; /* 줄 색상 */
    transition: width 0.3s ease; /* 줄 길이 애니메이션 */
}

.navbar a:hover::after {
    width: 100%; /* 줄이 전체 너비로 확장 */
}

/* 메인 섹션 */
section {
    padding: 20px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto; /* 가운데 정렬 */
    text-align: left; /* 텍스트 왼쪽 정렬 */
    box-sizing: border-box;
}

/* 섹션 컨테이너 */
.trend-section {
    margin: 20px auto; /* 섹션 간격 */
    max-width: 1100px; /* 메뉴바의 최대 너비와 일치 */
    padding: 0 20px; /* 양쪽 여백 추가 */
}

/* 섹션 제목에 ㄴ 모양 스타일 추가 */
.trend-section h2 {
    font-size: 22px; /* 제목 크기 */
    font-weight: bold; /* 글씨 굵기 */
    margin: 10px 0; /* 제목 위치 조정 */
    color: #ffc400; /* 제목 색상 */
    position: relative; /* 선 배치를 위한 상대 위치 */
}

/* ㄴ 모양을 위한 선 스타일 */
.trend-section h2::before,
.trend-section h2::after {
    content: ''; /* 선을 나타내는 빈 콘텐츠 */
    position: absolute;
    background-color: #ffaa00; /* 선 색상 */
}

/* 왼쪽 세로 선 */
.trend-section h2::before {
    width: 3px; /* 세로선 두께 */
    height: 100%; /* 세로선 길이 */
    left: -7px; /* 제목 기준 왼쪽 간격 */
    top: 0; /* 제목과 같은 높이 */
}

/* 아래 가로 선 */
.trend-section h2::after {
    width: 120px; /* 가로선 길이 */
    height: 3px; /* 가로선 두께 */
    bottom: -2px; /* 제목 아래 간격 */
    left: -7px; /* 제목 기준 왼쪽 간격 */
}

/* 섹션 내용 */
.section-content {
    margin: 10px 20px; /* 섹션 내용 여백 */
}

/* TradingView 차트 스타일 */
.tradingview-widget-container {
    display: flex; /* 플렉스박스 사용으로 정렬 */
    justify-content: center; /* 중앙 정렬 */
    align-items: center; /* 세로축 정렬 */
    width: 100%; /* 부모 요소의 100% 너비로 설정 */
    max-width: 100%;
    margin: 0; /* 여백 제거 */
    padding: 0; /* 패딩 제거 */
}

#tradingview_1 {
    width: 100%; /* 차트 자체의 너비를 100%로 설정 */
    height: 400px; /* 높이를 자동으로 조정 */
    margin: 0;
    padding: 0;
}

/* 테이블 스타일 */
#crypto-table {
    width: 100%;
    margin: 20px auto;
    border-collapse: collapse; /* 테두리 겹치지 않도록 설정 */
    border-spacing: 0; /* 셀 간격 제거 */
    border: 1px solid #ddd; /* 외부 테두리 */
    border-radius: 10px; /* 모서리 둥글게 */
    overflow: hidden; /* 둥근 모서리 밖의 내용 숨김 */
}

/* 테이블 헤더 스타일 */
#crypto-table thead {
    background-color: #181818; /* 헤더 배경색 */
    color: rgb(232, 232, 232); /* 텍스트 색상 */
}

#crypto-table th, #crypto-table td {
    padding: 10px; /* 셀 내부 여백 */
    text-align: center; /* 텍스트 가운데 정렬 */
    border-bottom: 1px solid #ddd; /* 행 간격선 추가 */
}

/* 마지막 행의 구분선 제거 */
#crypto-table tbody tr:last-child td {
    border-bottom: none;
}

/* 테이블 본문 스타일 */
#crypto-table tbody tr:nth-child(even) {
    background-color: #181818; /* 짝수 행 배경색 */
}

#crypto-table tbody tr:nth-child(odd) {
    background-color: #181818; /* 홀수 행 배경색 */
}

#crypto-table tbody tr:hover {
    background-color: #0a0a0aca; /* 행에 마우스를 올렸을 때 배경색 */
}

/* 로고 버튼 컨테이너 */
.logo-buttons {
    margin-left: auto; /* 오른쪽 끝으로 정렬 */
    display: flex;
    gap: 10px; /* 버튼 간격 */
}

/* 공통 로고 버튼 스타일 */
.logo-btn {
    width: 40px; /* 버튼 크기 */
    height: 40px;
    border-radius: 50%; /* 동그란 버튼 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #ffffff; /* 기본 배경색 */
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 버튼 그림자 */
}

.logo-btn img {
    width: 70%; /* 로고 크기 */
    height: 70%;
    object-fit: contain; /* 로고가 잘리지 않도록 */
}

/* 로고 버튼 마우스 오버 효과 */
.logo-btn:hover {
    transform: scale(1.1); /* 확대 효과 */
    background-color: #7a7a7a79; /* 밝은 배경색 */
}

/* 바이낸스 버튼 */
.binance {
    background-color: #111111; /* 바이낸스 배경색 */
}

/* 바이비트 버튼 */
.bybit {
    background-color: #111111; /* 바이비트 배경색 */
}

/* 업비트 버튼 */
.upbit {
    background-color: #111111; /* 업비트 배경색 */
}

/* 빗썸 버튼 */
.bithumb {
    background-color: #111111;
}

/* 그리드 컨테이너 스타일 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3개의 열 */
    gap: 20px; /* 사각형 사이의 간격 */
    margin: 20px 0; /* 상하 여백 */
    padding: 10px; /* 컨테이너 내부 여백 */
    justify-items: center; /* 각 항목을 가운데 정렬 */
}

/* 사각형 스타일 */
.grid-item {
    width: 100%; /* 사각형의 너비 */
    max-width: 300px; /* 최대 너비 제한 */
    aspect-ratio: 1; /* 정사각형 유지 */
    background-color: #0f0f0f; /* 배경색 */
    border-radius: 10px; /* 모서리를 둥글게 */
    overflow: hidden; /* 이미지가 넘치지 않도록 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 그림자 효과 */
    position: relative; /* 텍스트 배치를 위한 상대 위치 */
}

/* 이미지 스타일 */
.grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지를 사각형에 맞춤 */
}

/* 텍스트 오버레이 */
.grid-item .text-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(8, 8, 8, 0.8); /* 반투명 배경 */
    color: white; /* 텍스트 색상 */
    padding: 10px;
    text-align: center;
    font-size: 16px;
}

/* 라벨 스타일 */
.bullish-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(10, 10, 10, 0.5); /* 투명도 낮은 검정색 배경 */
    color: #00c200; /* 형광 초록색 텍스트 */
    padding: 5px 10px; /* 텍스트 여백 */
    border-radius: 20px; /* 양쪽 끝 둥근 모양 */
    font-size: 14px; /* 텍스트 크기 */
    display: flex; /* 아이템 정렬 */
    align-items: center;
    gap: 5px; /* 텍스트와 아이콘 사이 간격 */
}

/* 동그라미 아이콘 */
.bullish-label .circle {
    width: 10px; /* 동그라미 크기 */
    height: 10px;
    border: 2px solid #00c200; /* 형광 초록색 테두리 */
    border-radius: 50%; /* 완전히 둥근 모양 */
    display: inline-block;
}

/* Bullish 레이블 */
.grid-item .bullish-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(10, 10, 10, 0.5);
    color: #00c200;
    font-weight: bold;
    font-size: 14px;
    border-radius: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Bullish 레이블 아이콘 */
.grid-item .bullish-label .circle {
    position: relative;
    width: 14px; /* 동그라미 크기 */
    height: 14px;
    border: 2px solid #00c200;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 동그라미 안의 화살표 */
.grid-item .bullish-label .circle::before {
    content: '';
    position: absolute;
    width: 4px; /* 화살표 몸체 너비 */
    height: 4px; /* 화살표 몸체 높이 */
    border-left: 2px solid #00c200; /* 화살표 왼쪽 선 */
    border-top: 2px solid #00c200; /* 화살표 위쪽 선 */
    transform: rotate(45deg); /* 화살표 모양 */
}

/* bearish 라벨 */
.bearish-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(10, 10, 10, 0.5); /* 투명도 낮은 검정색 배경 */
    color: #e44400; /* 형광 초록색 텍스트 */
    padding: 5px 10px; /* 텍스트 여백 */
    border-radius: 20px; /* 양쪽 끝 둥근 모양 */
    font-size: 14px; /* 텍스트 크기 */
    display: flex; /* 아이템 정렬 */
    align-items: center;
    gap: 5px; /* 텍스트와 아이콘 사이 간격 */
}

/* 동그라미 아이콘 */
.bearish-label .circle {
    width: 10px; /* 동그라미 크기 */
    height: 10px;
    border: 2px solid #e44400; /* 형광 초록색 테두리 */
    border-radius: 50%; /* 완전히 둥근 모양 */
    display: inline-block;
}

/* Bullish 레이블 */
.grid-item .bearish-label {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(10, 10, 10, 0.5);
    color: #e44400;
    font-weight: bold;
    font-size: 14px;
    border-radius: 20px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Bullish 레이블 아이콘 */
.grid-item .bearish-label .circle {
    position: relative;
    width: 14px; /* 동그라미 크기 */
    height: 14px;
    border: 2px solid #e44400;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 동그라미 안의 화살표 */
.grid-item .bearish-label .circle::before {
    content: '';
    position: absolute;
    width: 4px; /* 화살표 몸체 너비 */
    height: 4px; /* 화살표 몸체 높이 */
    border-left: 2px solid #e44400; /* 화살표 왼쪽 선 */
    border-top: 2px solid #e44400; /* 화살표 위쪽 선 */
    transform: rotate(225deg); /* 화살표 모양 */
}