body {
    font-family: sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f2f5;
}

.auth-container {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

h1 {
    margin-bottom: 1.5rem;
}

form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

input {
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

button {
    padding: 0.75rem;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:disabled {
    background-color: #6c757d; /* 회색 계열 */
    cursor: not-allowed;
}

button:hover {
    background-color: #0056b3;
}

p {
    margin-top: 1.5rem;
}

a {
    color: #007bff;
    text-decoration: none;
}

.hidden {
    display: none;
}

.error-text {
    color: #dc3545;
    margin-top: 1rem;
    min-height: 1.2em; /* 에러 메시지가 없을 때도 공간 차지 */
}

/* Lobby Styles */
.lobby-container {
    width: 90%;
    max-width: 1200px;
    height: 90vh;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.lobby-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border-bottom: 1px solid #eee;
}

#user-profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

#user-resources {
    display: flex;
    gap: 1.5rem;
}

.lobby-main {
    display: flex;
    flex-grow: 1;
}

.lobby-nav {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-right: 1px solid #eee;
}

.lobby-nav button {
    margin-bottom: 1rem;
}

.content-area {
    flex-grow: 1;
    padding: 2rem;
    overflow-y: auto; /* 내용이 길어지면 스크롤 */
}

.view {
    /* 기본 뷰 스타일 */
}

/* Inventory Grid Style */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
}
.inventory-item {
    text-align: center;
    border: 1px solid #eee;
    padding: 0.5rem; /* 세로 공간을 줄이기 위해 패딩을 줄입니다. */
    border-radius: 4px;
}
.inventory-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
}
/* Matchmaking Status Styles */
.matchmaking-status {
    margin-top: 2rem;
    padding: 1rem;
    border-radius: 4px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    min-height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.matchmaking-status .opponent-info {
    text-align: center;
}

.matchmaking-status .opponent-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 0.5rem;
}

/* Game Page Styles */
.game-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.player-info-area {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    background-color: #f1f1f1;
    border-radius: 8px;
    margin: 10px 0;
    width: 480px; /* 보드 너비와 맞추기 위함 */
}
.player-nickname { font-weight: bold; }

/* Game Page Styles */

.board-container {
    position: relative;
    width: 480px;
    height: 480px;
    border: 4px solid #333; /* 테두리를 더 두껍게 */
    transition: border-color 0.5s ease; /* 색상 변경 시 부드러운 전환 효과 */
}

.board-background {
    width: 100%;
    height: 100%;
}

.chess-piece {
    position: absolute;
    width: 60px;  /* 480px / 8 */
    height: 60px; /* 480px / 8 */
    cursor: pointer;
    transition: transform 0.1s ease-in-out; /* 부드러운 움직임 효과 */
}

.chess-piece:hover {
    transform: scale(1.1);
}

.game-controls {
    margin-top: 20px;
}

/* Move Highlight Styles */
.valid-move-highlight {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: rgba(20, 80, 200, 0.4);
    border-radius: 50%;
    box-sizing: border-box;
    pointer-events: all; /* 클릭 이벤트를 받을 수 있도록 함 */
    cursor: pointer;
}

/* Scrollable Table for Match History */
.scrollable-table {
    overflow-y: auto; /* 내용이 max-height를 넘으면 세로 스크롤 생성 */
    border: 1px solid #eee;
    border-radius: 4px;
}
.scrollable-table table {
    width: 100%; /* 부모 div에 꽉 차도록 */
    border-collapse: collapse;
}
.scrollable-table th, .scrollable-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

/* '내 정보' 뷰의 테이블은 좁게 */
#my-info-view .scrollable-table {
    max-height: 120px; 
}

/* '리더보드' 뷰의 테이블은 길게 */
#leaderboard-view .scrollable-table {
    max-height: 60vh; /* 화면 높이의 60% 만큼 길게 */
}


/* Shop Grid Style */
.shop-grid {
    display: flex; /* 아이템들을 가로로 나열 */
    flex-wrap: nowrap; /* 줄바꿈 안함 */
    overflow-x: auto; /* 내용이 넘치면 가로 스크롤 생성 */
    gap: 1.5rem;
    padding-bottom: 1rem; /* 스크롤바와의 여백 */
}

.shop-item {
    flex: 0 0 200px; /* 아이템의 기본 너비를 200px로 고정, 줄어들거나 늘어나지 않음 */
    border: 1px solid #eee;
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
}
.shop-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.horizontal-scroll-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 1.5rem;
    padding: 0;
}

.grid-item {
    flex: 0 0 150px; /* 아이템 너비 고정 */
    border: 1px solid #eee;
    padding: 1rem;
    border-radius: 4px;
    text-align: center;
}

.grid-item img {
    width: 80px;
    height: 80px;
    object-fit: contain; /* 이미지가 잘리지 않도록 */
}

/* ================== 탭 UI 스타일 ================== */
.tab-buttons {
    display: flex;
    border-bottom: 2px solid #333; /* 탭과 콘텐츠 구분선 */
    margin-bottom: 20px;
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: #555;
    font-size: 16px;
    position: relative;
    bottom: -2px; /* 구분선과 겹치게 배치 */
    transition: color 0.3s ease;
}

.tab-button:hover {
    color: #000;
}

.tab-button.active {
    color: #000;
    font-weight: bold;
    border-bottom: 2px solid #4a90e2; /* 활성 탭 하단 파란색 선 */
}

.tab-content {
    animation: fadeIn 0.5s; /* 탭 콘텐츠 나타날 때 페이드인 효과 */
}

/* 페이드인 애니메이션 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 프라이빗 매치 컨트롤 UI 개선 */
#private-match-controls {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 요소 간 간격 */
    max-width: 300px;
    margin: 0 auto; /* 가운데 정렬 */
}

#private-match-controls hr {
    width: 100%;
    border: 1px solid #333;
}

#private-match-controls input[type="text"] {
    padding: 10px;
    background-color: #222;
    border: 1px solid #444;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    font-size: 16px;
}