@charset "UTF-8";
#container {
    width: 900px;
    box-sizing:border-box;
    border: 1px solid black;
    margin:0 auto;
}
#header {
    position: relative;
    width: 100%;
    height: 28vh; /* 화면 높이의 35%로 비율에 맞게 조정 */
    background-image: url('soccer111.jpg'); /* 이미지 경로 수정 */
	background-repeat: no-repeat;
    background-position:30% 50%; /*center; 배경 위치를 중앙으로 설정 */
    background-size:cover; /* 배경 이미지가 영역을 꽉 채우도록 설정 */
}
h1 {
    position: absolute;
    left: 10.5vw; /* 왼쪽 위치를 화면 비율로 설정 left: 250px; */
    top: 3.7vh;  /* 상단 위치를 화면 비율로 3vh설정 top:80px; */
    font-size: 6.5vw; /* 폰트 크기를 화면 비율로 설정 font-size: 100px; */
    margin:0;
    color: white;
    user-select: none; /* 텍스트 선택 금지 */
}
#mbox {
    width: 100%;
    height: 12vh;
    background-color: rgb(223, 143, 87);
}
#mbox1 {
	/*display: f;*/
    /*justify-content: space-around; /* A, B, C를 가로로 나열 */
    /*align-items: stretch; /* 모든 자식 요소를 가로 중앙 정렬 */
    width: 100%;
    height:6.5vh;
}
.mbox1_1, .mbox1_2, .mbox1_3 {
	width:33%;
	max-width: 298px;
	height:5.5vh;
    float:left;
    align-items: center;
    text-align: center;
}

#mbox1 select  {
    width: 15vw;
    height:3.5vh;
    margin-top:15px;

  	/* max-height: 300px; 드롭다운의 최대 높이 설정 */
  	overflow-x: scroll; /* 드롭다운 항목이 너무 많을 경우 스크롤 활성화 */
    font-size: 15px; /* 글자 크기 */
    box-sizing: border-box; /* 추가: padding과 border를 포함하도록 */
}

#mbox1 select:focus {
	width: 15vw;
	/* max-height: 390px; /* 드롭다운 메뉴의 높이를 제한 (필요시 조정) */
	/*max-width: 100%; /*포커스 상태에서도 가로 확장 방지 */
	overflow-x: scroll; /* 드롭다운 항목이 너무 많을 경우 스크롤 활성화 */

}
#mbox2_1 {
    width: 100%;
    /*max-width: 900px; */
    height:5vh;
    clear:both;
}
.search-wrapper {
	display: flex;
    justify-content: center; /* 검색 버튼을 가로 중앙 정렬 */
    align-items: center;
}
.search-btn {
	/*flex:0.15; */
	/*text-align: center;*/
    width: 7vw; /* 원하는 너비 설정 */
    height: 3.8vh; /* 원하는 높이 설정 */
    margin-top:7px;
    font-size: 14px; /* 글자 크기 */
    background-color: rgb(164, 164, 182);
    color: white;
    cursor: pointer;
    border-radius: 4px;
    padding: 1px; /* 여백 제거 */
    border:1px solid black;
}

#main {
    width: 100%; /* 부모 요소에 맞게 조정 */
    /* max-width: 900px;  최대 너비 설정 */
    /*clear:both;*/
}
/* 테이블 스타일 */
.con table {
    width: 100%; /* 테이블을 부모 요소의 너비에 맞게 설정 */
    table-layout: fixed; /* 고정 레이아웃 */
    border-collapse: collapse; /* 테이블 셀 경계 합치기 */
    text-align:center;
}
.con th, .con td {
    /* padding: 1px; /* 셀 패딩으로 간격 조정-여기서 패딩을 없애야 반응형일때 고정테이블이 왼쪽으로 밀리지 않음 */
    border: 1px solid white; /* 경계선 추가 */
    box-sizing: border-box;
    vertical-align: middle; /* 수직 정렬 */
    /*font-size: 16px; /* 기본 글자 크기 설정 */
    /*overflow: hidden; /* 내용이 넘칠 경우 숨김 */
    /* text-overflow: ellipsis; /* 내용이 넘칠 경우 생략 부호 표시 */
    /*white-space: nowrap; /* 줄 바꿈 방지 */
}
thead tr:nth-of-type(1), tbody tr:nth-of-type(2n+1) {
	height: 40px; /*홀수 행 높이 설정 */
	font-size: 20px; /* 기본 글자 크기 설정 */ 
}
thead tr:nth-of-type(2), tbody tr:nth-of-type(2n) {
	height: 25px; /*짝수 행 높이 설정 */
	font-size: 14px; /* 기본 보다 글자 크기  작게 설정 */ 
}
tbody {
	overflow-y: scroll; /* 수직 스크롤 가능 */
}
.A {
	/*background-color: rgb(158, 80, 104);*/
	border: 1px solid white;
	box-sizing:border-box;
	text-align:center;
	/*font-weight:600;*/
	padding:15px 0 8px;
}
.C {
	/*background-color: rgb(164, 164, 182);*/
	
	border: 1px solid white;
	box-sizing:border-box;
	text-align: center;
	padding: 15px 0 8px;
}
.con thead tr:nth-of-type(1) {
	background-color: rgb(158, 80, 104);
	color:white;
}
.con thead tr:nth-of-type(2) {
	background-color: rgb(207, 168, 180); /* 50% 색깔 옅게 만듦*/
	color:white;
}
.con tr:nth-of-type(2n+1) {
	background-color: rgb(164, 164, 182);
}

/*#con_td_sub, #con_th_sub {color:lightgray;} 이거 코드 안 먹어서 일단 보류*/
.con tr:nth-of-type(2n) {
	background-color:lightgray; 
}
tbody td a {
	text-decoration:none; /* a 태그 밑줄 없애기 */
	color:black; /* a 태그 파랑색 글자 흑색으로 바꾸기 */
}
.con th:nth-child(1),
.con td:nth-child(1) {
	width: 10%; 
}
.con th:nth-child(2),
.con td:nth-child(2) {
	width: 40%; /* 두 번째 칼럼 고정 너비 */
}
.con th:nth-child(3),
.con td:nth-child(3) {
	width: 17%; 
}
.con th:nth-child(4),
.con td:nth-child(4) {
	width: 33%; 
}

/* footer 스타일 */
#footer {
	width:100%;
	height:32px; /* 원하는 높이 설정 */
	display: flex;  /* Flexbox 활성화 */
	justify-content: space-between;  /* 항목들이 양 끝에 배치되도록 */
	align-items: center;  /* 수직 중앙 정렬 */
	background-color:lightgray;  /* 배경 색상 (선택 사항) */
	/*padding: 0 20px;  /* 좌우 여백 사이즈를 컨테이너사이즈에서 빼줘야 테이블크기와 맞음 */
}

/* '사용설명서' 링크와 '정보처리' 링크와 '이용약관' 링크 */
.mm, .nn, .oo {
	text-decoration: none;  /*밑줄 제거 */
	width:200px;
	height:20px;
	font-size:13px;
	margin:0 5px 0 5px;
	color:black;
	align-items: center;  /* 수직 중앙 정렬 */
	text-align: center;  /* 가운데 정렬 */
}

/* 긴급공지용 팝업창 CSS */
/* 배경을 덮는 어두운 오버레이 */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            display: none; /*긴급공지 사용할땐 none 대신에 flex를 대입*/
            justify-content: center;
            align-items: center;
            z-index: 999;
        }

        /* 팝업 창 스타일 */
        .popup-content {
            width: 60%;
            max-width: 600px;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: center;
            position: relative;
        }

        /* 닫기 버튼 스타일 */
        .close-btn {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 20px;
            cursor: pointer;
            background: none;
            border: none;
        }
					
/* 모바일 환경에 대한 미디어 쿼리 */
@media screen and (max-width: 520px) {
	#container {
		width:100vw;
	}
	#header {
	    height: 28vw; /* 화면 높이의 35%에서 화면 가로길이의 28%로 비율 수정 */
	    text-align:center;
	    background-image: url('soccer777.jpg'); /* 이미지 경로 수정 */
		background-repeat: no-repeat;/* 사진 용량 크기 모바일사이즈 맞춰 더 줄여야함*/
	    background-position:30% 50%; /*center; 배경 위치를 중앙으로 설정 */
    	background-size:cover; /* 배경 이미지가 영역을 꽉 채우도록 설정 */
	}
	h1 {
		top: 3.3vh;  /* 상단 위치를 화면 비율로 3vh설정 top:80px; */
		left: 20vw;
	    font-size: 14vw; /* 폰트 크기를 화면 비율로 설정 font-size: 100px; */
	    margin:0;
	    color:white;
	    /*left:15vw;/**/
	    /*top:2vw;/**/
	}
	#mbox1 select  {
	    width: 25vw;
	    margin-top:14px;
	    padding:0 0px 0 0px;
	}
	.search-btn {
	    width: 80px; /* 원하는 너비 설정 */
	    height: 26px; /* 원하는 높이 설정 */
	    margin-top:3px;
	}
    .con {
		display: block; /* 테이블을 블록 요소로 변경 */
		/*overflow-x: auto; /* 수평 스크롤 가능 */
		/*white-space: nowrap; /* 줄 바꿈 방지 */
		/*overflow: auto;/**/
	}
	.con table {
		width:100vw;
		height:57vh;
	}
	tbody {
		overflow-X:scroll;	
	}
	thead tr:nth-of-type(1), tbody tr:nth-of-type(2n+1) {
		height: 40px; /*홀수 행 높이 설정 */
		font-size: 16px; /* 기본 글자 크기 설정 */
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis; /* 내용이 넘칠 경우 생략 부호 표시 */ 
	}
	thead tr:nth-of-type(2), tbody tr:nth-of-type(2n) {
		height: 25px; /*짝수 행 높이 설정 */
		font-size: 14px; /* 기본 보다 글자 크기  작게 설정 */ 
	}
}