@media screen and (max-width: 2559px) {
html {
        /* zoom 보다는 html의 폰트 사이즈나 body zoom 하나만 사용 */
        overflow-x: hidden;
    }
    body {
        zoom: 0.67;
        overflow-x: hidden; /* 가위로 자르듯 가로 스크롤 제거 */
    }
}

@media screen and (max-width: 1920px) {
    /* transform: scale(0.75); 
    transform-origin: top center; 
    width: 133.33%; (0.75배 축소된 만큼 너비를 확장해야 여백이 안 생김)
    */
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url(./woff2/Pretendard-Black.woff2) format('woff2'), url(./woff/Pretendard-Black.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url(./woff2/Pretendard-ExtraBold.woff2) format('woff2'), url(./woff/Pretendard-ExtraBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url(./woff2/Pretendard-Bold.woff2) format('woff2'), url(./woff/Pretendard-Bold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url(./woff2/Pretendard-SemiBold.woff2) format('woff2'), url(./woff/Pretendard-SemiBold.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url(./woff2/Pretendard-Medium.woff2) format('woff2'), url(./woff/Pretendard-Medium.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url(./woff2/Pretendard-Regular.woff2) format('woff2'), url(./woff/Pretendard-Regular.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url(./woff2/Pretendard-Light.woff2) format('woff2'), url(./woff/Pretendard-Light.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url(./woff2/Pretendard-ExtraLight.woff2) format('woff2'), url(./woff/Pretendard-ExtraLight.woff) format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url(./woff2/Pretendard-Thin.woff2) format('woff2'), url(./woff/Pretendard-Thin.woff) format('woff');
}

/* 기본 설정 */
:root {
    --bg-dark: #1a1a1a;
    --bg-nav: #1f1f1f;
    --bg-card: #262626;
    --text-white: #ffffff;
    --text-gray: #787878;
    --red: #ff4d4d;
    --green: #4ad640;
    --blue-point: #00c0ff;
    /* 기준 해상도 */
    --base-width: 2560;
    --padding-side: calc(120 / var(--base-width) * 100vw);
    --nav-height: 200px; /* 절대값(px)으로 고정 */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-white);
    font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
    line-height: 1.4;
    /* 가로 스크롤 방지 */
    overflow-x: hidden; 
    width: 100%;
    letter-spacing : -0.08em;   /* 자간 설정. 음수는 줄이기 */
}

input, button, textarea, select {
    font-family: 'Pretendard', sans-serif;
}

.font-black {
    font-weight: 900 !important;
}

/* 네비게이션 */
.top-nav {
    height: var(--nav-height);
    background-color: var(--bg-nav);

    /* 창이 줄어들어도 높이가 더 이상 작아지지 않게 방어 */
    flex-shrink: 0;

    display: flex;
    align-items: center;
    padding: 0 45px; /* 양옆 여백 */
    justify-content: space-between;
    /* min-width: 1600px; 요소들이 겹치지 않게 최소 너비 확보 */
    width: 100%;
    /* 하단 외곽선 추가 */
    border-bottom: 1px solid var(--text-gray);
    box-sizing: border-box;
    /* 그림자 효과 강화 및 레이어 설정 */
    position: fixed; /* 상단 고정 */
    top: 0;
    z-index: 1000; /* 이 줄이 추가되어야 그림자가 컨텐츠 위로 올라옵니다 */
    /* 하단 그림자 추가 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* 왼쪽 그룹 (로고 + 메뉴) */
.nav-left-group {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 화면이 작아져도 이 영역은 줄어들지 않음 */
}
.nav-logo {
    height: 112px; /* 전체 192px에서 위아래 40px씩 빼면 112px */
    width: auto;   /* 비율 유지 */
    margin-left: 61px; /* 왼쪽 여백 61px */
    display: block;
}
.logo-circle { width: 45px; height: 45px; background: #ddd; border-radius: 50%; }
.menu-list {
    display: flex;
    list-style: none;
    gap: 124px; /* 메뉴 글자 사이 간격 124px */
    margin-left: 100px; /* 로고와 일정 사이 간격 100px */
    
    /* 폰트 설정 */
    font-size: 36px;
    font-weight: bold;
    color: var(--text-gray);
    padding: 0;
}
.menu-list li {
    cursor: pointer;
    white-space: nowrap; /* 줄바꿈 방지 */
}
.menu-list li.active {
    color: var(--text-white);
}

/* 검색창 영역 */
.search-area {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1; /* 남는 모든 가운데 공간을 차지함 */
    margin: 0 40px; /* 왼쪽 메뉴와 오른쪽 프로필 사이의 최소 간격 */
    max-width: 830px; /* 아무리 넓어져도 830px까지만 커짐 */
}

.search-container {
    position: relative;
    width: 100%; /* 부모(.search-area)가 주는 대로 꽉 채움 */
    height: 102px;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 35px; /* 왼쪽에서 35px 떨어짐 */
    z-index: 10;
    /* 아이콘 크기는 이미지 원본 비율 따름, 필요시 width 지정 */
}

.search-container input {
    width: 100%;
    height: 100%;
    background: #303030;

    border: none;
    border-radius: 102px;
    
    /* 폰트 및 텍스트 스타일 */
    color: white;
    font-size: 24px; /* 텍스트 크기 적절히 설정 */
    outline: none;
    
    /* 텍스트 시작 위치 계산 */
    /* 아이콘 위치(35px) + 아이콘 너비(약 30px 가정) + 커서간격(16px) */
    /* 대략 80~90px 정도 패딩을 주면 적절합니다. */
    padding-left: 90px; 
    padding-right: 20px;
    
    /* placeholder 텍스트 위치 미세 조정이 필요하면 text-indent 사용 */
}
/* placeholder 색상 등 스타일 */
.search-container input::placeholder {
    color: #787878;
    /* placeholder가 커서보다 28px 뒤라면 text-indent 추가 가능 */
    /* text-indent: 28px; */ 
}
/* 오른쪽 그룹 (글로벌 + 프로필 + 로그인) */
.nav-right-group {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* 화면이 작아져도 이 영역은 줄어들지 않음 */
    gap: 20px; /* 요소들 사이 간격 20px */
    padding-right: 45px; /* 오른쪽 끝에서 45px 떨어짐 */
}
.global-icon {
    width: 45px; /* 로고 서클 사이즈 등 참조하여 크기 지정 (필요시 수정) */
    height: auto;
    cursor: pointer;
}
.profile-circle {
    width: 102px;  /* 지름 102px */
    height: 102px;
    border-radius: 50%;
    background-color: #ddd; /* 임시 배경, 이미지 있으면 변경 */
    color: black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
    overflow: hidden; /* 내용 넘침 방지 */
}

.login-btn {
    height: 102px; /* 높이 102px */
    background: white;
    color: black;
    border: none;
    padding: 0 40px; /* 좌우 패딩 적절히 */
    border-radius: 51px; /* 높이의 절반값으로 둥글게 */
    font-size: 24px; /* 폰트 크기 키움 */
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

/* 레이아웃 */
.main-wrapper, .main-container, .modal-overlay {
    /* 내부의 별도 스크롤 생성을 방지 */
    overflow-y: visible; 
}

.main-wrapper {
    display: flex;
    justify-content: center; /* 전체 컨텐츠 중앙 정렬 유지 */
    width: 100%;
    
    margin-top: var(--nav-height);
    /* min-width: 1400px;      화면이 아주 작아져도 레이아웃이 깨지지 않게 최소 너비 설정 */
    min-width: auto;
    padding-left: 97px;          /* 왼쪽 끝 여백 고정 */
    padding-right: 97px;         /* 오른쪽 끝 여백 고정 (중요) */
    box-sizing: border-box;
    overflow-x: hidden;       /* 화면이 작아지면 잘리는 대신 하단 스크롤 생성여부 */
}

.main-container {
    display: flex;
    /* 왼쪽 너비(1320) + 오른쪽 너비(700) = 2020px */
    /* 화면이 작아질 경우를 대비해 width는 auto 혹은 큰 값으로 설정 */
    margin: 0 auto;
    width: auto;
    max-width: 100%; /* 화면 밖으로 나가지 않게 제어 */
}

/* 제목과 섹션을 감싸는 큰 틀 */
.section-wrapper {
    margin-bottom: 80px; /* 다음 섹션(이후 경기)과의 간격 고정 */
}

.section-title {
    display: flex;
    align-items: baseline;
    font-size: 55px;
    font-weight: 900;
    /* margin-bottom: 23px; */
    width: 1320px;               /* 밑줄 및 제목 영역 너비 고정 */
    position: relative;
    font-family: 'Pretendard', sans-serif;
}

.section-title .sub-title {
    font-size: 35px; /* 가이드의 25pt 반영 */
    margin-left: 11px; /* 국문 라벨과 영문 라벨 간격 11px */
    color: var(--text-white); /* 가이드 이미지에 따라 흰색으로 조정 */
    font-weight: bold;

    display: inline-block;
    transform: translateY(5px);  /*픽셀만큼 아래로 이동. 음수면 위로 이동 */
}

.setting-icon {
    position: absolute;
    right: 0;
    bottom: 5px; /* 밑줄 바로 위에 위치하도록 조정 */
    width: 32px;
    height: 32px;
}

.sub-title {
    font-size: 18px;
    color: var(--text-gray);
    font-weight: normal;
}

.content-left {
    width: 1440px;               /* 1320px(컨텐츠) + 120px(여백) */
    padding-right: var(--padding-side);        /* 가이드: 카드 오른쪽 테두리로부터 120px 여백 */
    padding-top: 50px; /* 네비게이션 라인으로부터 50px 떨어짐 */
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--text-gray); /* 중앙 세로 라인 */
    flex-shrink: 0;
    box-sizing: border-box;
}

.content-left .divider-line {
    width: 1320px;
}

.content-right {
    width: 820px;                /* 700px(컨텐츠) + 120px(여백) */
    padding-left: 120px;         /* 가이드: 세로선으로부터 120px 여백 */
    padding-top: 50px; /* 네비게이션 라인으로부터 50px 떨어짐 */
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    box-sizing: border-box;
}
/* 오른쪽 전용: 자동으로 채우기 */
.content-right .divider-line {
    width: 100%;
}

.community-section {
    width: 700px;                /* 우측 실제 컨텐츠 너비 */
}

/* 커뮤니티 라벨 바로 아래 밑줄 추가 */
.community-section .section-title {
    margin-bottom: 23px; /* 가이드: 라벨과 밑줄 사이 23px */
}
.community-section .section-title .sub-title {
    font-size: 25px;
    margin-left: 11px;
    color: var(--text-white);
}
/* 커뮤니티 섹션 내부에 밑줄이 바로 오도록 설정 */
.community-section .divider-line {
    border-top: 1px solid var(--text-gray);
    margin-top: 23px; /* 라벨과의 간격 */
    margin-bottom: 23px; /* 사각형과의 간격 */
    width: 100%;
}

/* 카드 스타일 (처음에 보이는 형태) */
.card-row { 
    display: flex;
    gap: 20px;
}

/*.match-card {
    width: 650px; /*고정
    height: 420px; /* 세로 420px 고정 
    background-color: var(--bg-card);
    border-radius: 24px;
    flex-shrink: 0; /* 크기 유지 
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    /* flex: 1; 
    /* 확대될 때 다른 요소 위로 띄우기 위한 기준 
    transform-origin: center center;
    /* 카드 내부 컨텐츠 수직 중앙 정렬 
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; 
    justify-content: center;
    /* 확대시 주변 밀지 않도록 방지 
    transition: transform 0.3x cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform; /* 애니매이션 성능 최적화 

}*/
.match-card {
    width: 650px;
    height: 420px;
    background-color: var(--bg-card);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center; /* 가로 중앙 정렬 핵심 */
    padding-top: 42px; 
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}
/* 로그인 카드 정보*/

.login-card {
    background-color: var(--bg-card);
    width: 35%;
    min-width: 35%;
    max-width: 35%;
    height: 40%;
    max-height: 40%;
    min-height: 40%;
    padding: 50px 40px;
    border-radius: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin-top: 144px;
}

.top-logo-text {
    position: absolute;
    top: 56px;
    left: 60px;
    font-size: 32px;
    font-weight: 500;
    color: #f0f0f0;
}

.login-title {
    font-size: 200%;
    margin-bottom: 5%;
    font-weight: 700;
    color: white;
}

.custom-input {
    width: 90%;
    height: 7%;
    padding: 30px;
    background-color: var(--bg-card);
    border: 1px solid #777;
    border-radius: 26px;
    color: #fff;
    font-size: 26px;
    outline: none;
    margin-bottom: 15px;
    transition: border-color 0.2s;
}

#re-password-group {
    display: none; 
    width: 100%;
}

.custom-input::placeholder {
    color: #777;
}

.custom-input:focus {
    border-color: #555;
}

/* 회원가입 링크 */
.signup-link {
    display: block;
    font-size: 18.5px;
    color: var(--bg-point);
    text-decoration: none;
    margin-bottom: 15%;
    margin-left: -50%;
    font-weight: 500;
    padding-left: 30px;
}
.signup-link:hover {
    text-decoration: underline;
}

/* 진행 버튼 */
.submit-btn {
    width: 40%;
    height: 30%;
    background-color: #333333;
    color: #555;
    border: 1px solid #333;
    padding: 12px 0;
    border-radius: 25px;
    font-size: 26px;
    font-weight: 600;
    cursor: default;
    transition: all 0.3s ease;
    pointer-events: none;
}
.submit-btn.active {
    background-color: var(--bg-point);
    color: white;
    border: none;
    cursor: pointer;
    pointer-events: auto;
}

.logo-img {
    height: 250px; /* 전체 192px에서 위아래 40px씩 빼면 112px */
    width: auto;   /* 비율 유지 */
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 56px;
}

/* .status {
    font-size: 32px;
    color: var(--text-gray); 
    font-weight: 900;
    margin-bottom: 27px; 
    position: static;
    bottom: 40px;
    left: 50%;
    transform: none;
    margin: 0;
    text-align: center;
    width: auto;
} */
.status {
    width: 100%;
    text-align: center;
    /* 세로 바가 absolute로 빠졌으므로 margin-top으로 위치 확보 */
    margin-top: 0; 
    margin-bottom: 35px;
    font-size: 32px;
    font-weight: 800;
    color: var(--text-gray);
}
.status-label {
    font-size: 26.5px;
    font-weight: 400;
    color: White;
    display: block;
    margin-top: 15px;
    margin-bottom: 1px;
}
.status.ready {
    color: #ff7c4e; 
}
.status.live {
    color: #61ff95;
}
.status.calc {
    color: #ffb517;
}

.vs-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 1;
    height: 190px;
}

.vs-display {
    display: flex;
    justify-content: space-between;  /* 양쪽 팀 로고를 끝으로 밀고 가운데 공간 확보 */
    align-items: flex-start;
    padding: 0 48px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    height: 250px;
}

.vs-display .team {
    flex: 0 0 190px; /* 로고 너비 190px 고정 */
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

/* 팀 이름 텍스트 영역. */ 
.vs-display .team p {
    font-size: 28px;
    font-weight: bold;
    margin-top: 1px;
    
    /* 두 줄 높이 미리 확보(고정) */
    min-height: 3em;    /* */

    white-space: nowrap;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    text-align: center;
} 

/* 글자가 길어졌을 때 */
.vs-display .team p.long-text {
    font-size: 24px;
    line-height: 1.2;
    transform: translateY(5px);
}

.team-logo-placeholder {
    width: 190px;
    height: 190px;
    flex-shrink: 0;
    background: transparent;
    border-radius: 12px;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    overflow: hidden; /* 영역 밖으로 나가는 이미지 숨김 */
}

.center-info-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* padding-top: 50px; */

    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);

    width: auto;
    min-width: 150px;
    z-index: 5;
    /* text-align: center; */
}

/* 로고 이미지가 없을 때(빈 태그일 때) 보여줄 임시 배경색 설정 */
.team-logo-placeholder:not(:has(img[src])), 
.team-logo-placeholder img[src=""], 
.team-logo-placeholder img:not([src]) {
    background-color: #444; /* 이미지가 없을 때만 회색 배경 유지 */
}

.team-logo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 비율 유지하며 칸 안에 들어가게 */
}

.team-logo-placeholder.red { background-color: var(--red); }

.vs-text { 
    font-size: 35px; 
    font-weight: 900; 
    margin-bottom: 5px;
    /* display: block;
    text-align: center; */
    line-height: 1;
}
.date {
    font-size: 21px;
    font-weight: 300;
    color: white;
    line-height: 1.1; /* 줄간격. 디폴트 1.4 */
    margin-top: 5px;
    white-space: nowrap;
}

.vertical-bar {
    width: 3px;
    height: 65px; /* 팀명 텍스트 높이와 비슷하게 조절 */
    background-color: white;
    display: block;
    /* absolute를 사용하여 부모(.match-card) 기준 팀명 높이로 강제 이동 */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    /* 팀 로고(190px) + 이름까지의 거리 고려하여 배치 */
    top: 220px; 
    margin-bottom: 3px;
}

/* 섹션 사이 하단 여백 */
.match-section:not(.scheduled) {
    margin-top: 50px; /* 아래 밑줄로부터 50px 내려옴 */
}

.match-section:not(.scheduled) .section-title {
    margin-bottom: 28px; /* 글자로부터 28px 떨어짐 */
}

/* :first-child 있었는데 떼었음 */
.match-section.scheduled {
    width: 1320px;
    display: flex;
    gap: 20px;                   /* 카드 사이 간격 20px */
    margin-bottom: 50px;
}

.list-container {
    display: flex;
    flex-direction: column;
    gap: 16px; /* 각 객체끼리 16px 간격 */
}
/* 리스트 스타일 */
.list-item {
    width: 100%; /* 위 카드들과 동일한 가로 너비 (부모 container에 맞춤) */
    height: 150px; /* 세로 150px */
    background: var(--bg-card);
    margin-bottom: 12px;
    padding: 0px 40px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.more-btn { color: var(--text-gray); cursor: pointer; }

/* 커뮤니티 & 사이드바 */
.comm-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    column-gap: 34px; /* 가로 간격 34px */
    row-gap: 37px;    /* 세로 간격 37px */
    width: 100%;                 /* 부모 너비(700px 영역)에 맞게 확장 */
}

.comm-item {
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    background: var(--bg-card);
    /* 사각형 정사각형 유지: width에 맞춰 height가 결정됨 */
    aspect-ratio: 1 / 1; 
    border-radius: 20px;
    width: 100%; /* 부모 너비에 맞게 확장되되 정사각형 유지 */
}

/* 그리드 아래 줄 (나의 승부예측 기록 위) */
.prediction-divider {
    border-top: 1px solid var(--text-gray);
    margin-bottom: 50px; /* 줄과 승부예측 라벨 사이 */
    width: 100%;
    /*width: 700px;*/
}
.prediction-section {
    background: transparent; /* 사각형 배경 제거 */
    box-shadow: none;        /* 그림자 제거 */
    padding: 0;
    margin-top: 32px;        /* [5번] 위 사각형 아랫변과 밑줄 사이 간격 32px */
}
/* 나의 승부예측 기록 라벨 */
.prediction-section .section-title {
    width: 700px;
    font-size: 55px;
    font-weight: bold;
    margin-bottom: 28px;
}

.predict-row {
    width: 100%;                 /* 350px 고정 해제하여 꽉 차게 변경 */
    background: var(--bg-card);
    height: 80px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    margin-bottom: 16px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* 개별 리스트에는 그림자 유지 */
}
/* 포인트 컬러 및 화살표 */
.predict-row::after {
    content: "➔";
    color: var(--text-gray);
    margin-left: 15px;
}
.predict-row span:first-child {
    font-size: 30px; /* SBB vs IFF 텍스트 크기 */
    font-weight: 900;
}
.point {
    font-size: 22px;
    font-weight: bold;
}
.point.plus { color: var(--green); }
.point.minus { color: var(--red); }

.login-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #444;
    color: var(--text-gray);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1;}
}

/* 팝업 배경 설정 */
.modal-overlay {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0); /* 배경을 어둡게 */

    /* 블러와 배경색 변화에 시간 보여줌 */
    transition: backdrop-filter 0.3s ease, background-color 0.3s ease;
    -webkit-transition: -webkit-backdrop-filter 0.3s ease, background-color 0.3s;

    backdrop-filter: blur(0px); /* 배경 블러. 시작은 블러 없이 */
    -webkit-backdrop-filter: blur(0px); /* 사파리 브라우저 호환용 */

    z-index: 1000;
    justify-content: center;
    align-items: center;
}

/* 팝업이 활성화 되었을 때 적용될 스타일 */
.modal-overlay.active {
    display: flex; /* 실제로는 JS에서 display를 먼저 바꾼 후 이 클래스를 붙입니다 */
    background-color: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 팝업 박스 */
.modal-content {
    background-color: #262626;
    padding: 40px;
    border-radius: 20px;
    width: 500px;
    max-width: 90%;
    position: relative;
    border: 1px solid #444;
    color: white;
}


/* 닫기 버튼 */
.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 30px;
    cursor: pointer;
    color: #787878;
}

.close-btn:hover {
    color: white;
}

/* 카드에 마우스 올렸을 때 클릭 가능 표시 */
.match-card {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.match-card:hover {
    /* 전체적으로 n% 확대 */
    transform: scale(1.03);
    /* 테두리 라인 없음*/
    border: 1px solid transparent;
    /* 그림자 추가 */
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    /*요소가 위로 겹쳐야함*/
    position: relative;
    z-index: 10;
}

/* 섹션 사이 구분선 */
.divider-line {
    border-top: 1px solid var(--text-gray);
    width: 100%; /* 부모(content-left/right) 너비에 맞춤 */
    /* width: 1320px; 왼쪽 컨텐츠 기준 너비 */
    margin-top: 10px;
    margin-bottom: 23px;
}

/* --- 모달 상세 뷰(Match Detail) 스타일 추가 --- */

/* 기존 .modal-content를 확장/수정 (기존 코드를 아래 코드로 덮어쓰거나 아래에 추가하세요) */
.modal-content.detail-view {
    width: 900px;
    max-width: 95%;
    background-color: #1a1a1a;
    padding: 35px;
    border-radius: 30px;
    /* 스크롤 제거 설정 */
    overflow: hidden; 
}

.stats-tables-grid {
    display: flex;
    flex-direction: column; /* 타자 아래 투수가 오도록 배치 */
    gap: 25px;
    margin-top: 20px;
}

.stats-box h3 {
    font-size: 20px;
    margin-bottom: 10px;
    /* 기존 var(--red)에서 흰색(var(--text-white))으로 변경 */
    border-left: 4px solid var(--text-white); 
    padding-left: 10px;
}

.unit {
    color: var(--text-gray);
    font-size: 14px;
    margin-left: 5px;
}

/* 상세 페이지 헤더 */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.modal-header h2 {
    font-size: 28px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.header-btns {
    display: flex;
    gap: 12px;
}

.btn-predict {
    background-color: #b1b2ff; /* 승부예측 버튼 색상 */
    color: black;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
}

.btn-exit {
    background-color: #333;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    cursor: pointer;
}

/* 스코어보드 카드 섹션 */
.scoreboard-card {
    background: #262626;
    border-radius: 20px;
    padding: 40px 20px;
    margin-bottom: 30px;
}

.score-main {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 30px;
}

.team-info {
    text-align: center;
    width: 150px;
}

.team-logo-circle {
    width: 80px;         /* 원하는 원형 크기 */
    height: 80px;
    border-radius: 50%;    /* 완벽한 원형으로 만듦 */
    background-color: transparent;
    /* 원 밖으로 나가는 큰 이미지를 잘라냄 */
    overflow: hidden;      
    /* 내부 이미지를 정중앙에 배치 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 15px;   /* 아래 팀명과의 간격 */
    /* border: 1px solid #444;  */ /*테두리 없음*/
}
/*이미지 없을 때만 배경색 부여*/
.team-logo-circle:not(:has(img[src])),
.team-logo-circle img[src=""] {
    background-color: #333;
}

/* 원형 틀 안의 이미지 설정 */
.team-logo-circle img {
    /* 부모 너비/높이 중 작은 쪽에 맞춰 이미지를 축소 */
    width: 100%;
    height: 100%;
    
    /* 이미지 비율을 유지하면서 틀 안에 쏙 들어가게 함 */
    /* 여백이 생기더라도 전체가 다 보이게 하려면 'contain' */
    /* 빈 공간 없이 꽉 채우면서 넘치는 부분을 자르려면 'cover' */
    object-fit: contain; 
    
    /* 큰 이미지가 찌그러지지 않도록 방지 */
    flex-shrink: 0;
}
.score-center {
    text-align: center;
}

.status-tag { color: var(--green); font-weight: bold; font-size: 20px; }
.time-stamp { color: white; font-size: 21px; margin: 5px 0; }
.collecting { color: #ffae00; font-size: 14px; font-weight: bold; }

.score-numbers {
    font-size: 48px;
    font-weight: 900;
    margin: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

/* 이닝/기록 테이블 공통 */
.inning-table, .player-stats {
    width: 100%;
    border-collapse: collapse;
    color: white;
    font-size: 14px;
}

.inning-table th { color: var(--text-gray); padding: 10px; border-bottom: 1px solid #333; }
.inning-table td { padding: 10px; text-align: center; border-bottom: 1px solid #333; }

/* 영상 플레이스홀더 */
.video-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    color: #444;
}

.play-icon { font-size: 60px; color: var(--red); margin-bottom: 10px; }

/* 하단 상세 기록 탭 */
.stats-tabs {
    display: flex;
    justify-content: center; /* 왼쪽 치우침 해결: 중앙 정렬 */
    gap: 0; /* 탭 사이 간격 제거 (버튼 스타일로 조절) */
    border-bottom: 2px solid #333; /* 하단 라인 추가 */
    margin-bottom: 25px;
}
.full-width-tabs {
    display: flex;
    width: 100%; /* 모달 가로 전체 사용 */
    justify-content: stretch;
    border-bottom: 2px solid #333;
    margin-bottom: 20px;
}

.full-width-tabs .tab-btn {
    flex: 1; /* 핵심: 두 버튼이 정확히 1:1 비율로 공간 차지 */
    padding: 15px 0;
    text-align: center;
    font-size: 16px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    position: relative;
}

.full-width-tabs .tab-btn.active {
    color: var(--text-white);
    font-weight: bold;
}

.full-width-tabs .tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--text-white);
}

/* 테이블 텍스트 정렬 */

.player-stats th 
{ 
    border-bottom: 1px solid #333; 
    padding: 8px; 
    text-align: center; 
    color: var(--text-gray); 
}

/* 투수 테이블 전용 너비 설정 (타자 테이블과 정렬 맞춤) */
/* 만약 WHIP를 OPS와 정확히 맞추고 싶다면 아래와 같이 더 세분화합니다 */
.pitcher-table th:nth-child(1) { width: 10%; } /* 타순 */
.pitcher-table th:nth-child(2) { width: 40%; } /* 타자명 + 포지션 */
.pitcher-table th:nth-child(3) { width: 16%; } /* AB + H => IP */
.pitcher-table th:nth-child(4) { width: 8%; }  /* HR => K */
.pitcher-table th:nth-child(5) { width: 10%; } /* AVG => ERA */
.pitcher-table th:nth-child(6) { width: 16%; } /* SB + OPS => WHIP */

.player-stats td 
{ 
    padding: 12px 8px;
    text-align: center; 
    border-bottom: 1px solid #222; 
    word-break: break-all; /* 이름이 길어질 경우 대비 */
}

.player-stats td:nth-child(n+4){
    font-family: 'Courier New', monospace; /* 고정폭 폰트로 숫자 가독성 향상 */
}

.fixed-layout {
    table-layout: fixed; /* 핵심: 내부 내용에 상관없이 지정된 너비(%) 유지 */
    width: 100%;
    border-collapse: collapse;
}

.fixed-layout th, .fixed-layout td {
    overflow: hidden;    /* 글자가 길어지면 숨김 처리 */
    text-overflow: ellipsis; /* 말줄임표 표시 */
    white-space: nowrap; /* 줄바꿈 방지 */
    text-align: center;
    padding: 10px 5px;
}