html {
    font-size: 18px;
	overflow-x: hidden; /* 가로 스크롤 없애기 */
}

body {
	font-size: 18px;

	font-family: "Nanum Gothic","Malgun Gothic", Gulim, Arial, sans-serif;
	background: #fbfbfb; /*#e3e3e3;   fbfbfb*/
	color:#444;
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* 가로 스크롤 없애기 */
}

img {
	max-width:100%;
}

a {
	text-decoration: none;
}


a:hover {
	text-decoration: none;
}




/*============ 페이지 스타일 ==================== */

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* 🌙 어두운 배경 모드 스타일 */
.page-mode {
    /* 페이지네이션 컨테이너 자체의 배경색 (게시판 하단 배경색과 일치해야 함) */
    background-color: #333; /* 어두운 회색 */
    color: #fff; /* 기본 텍스트 색상: 흰색 */
    /*border-top: 1px solid #444;*/ /* 상단 구분선 */
}

/* 모든 페이지 링크 기본 스타일 */
.page-mode .pagination-link {
    color: #ccc; /* 기본 링크 텍스트색 */
    text-decoration: none;
    padding: 8px 12px;
    margin: 0 4px;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

/* 처음, 이전, 다음, 마지막 가기 링크 (화살표/텍스트 구분) */
.page-mode .first,
.page-mode .prev,
.page-mode .next,
.page-mode .last {
    color: #bbb; /* 기본 페이지 번호보다 조금 더 어둡게 */
    font-size: 13px;
    padding: 8px 6px; /* 모바일에서 클릭 영역 확보 */
}

/* 페이지 번호 링크 */
.page-mode .page {
    min-width: 30px;
    text-align: center;
}

/* 🖱️ 마우스 오버/터치 시 (Dark Mode) */
.page-mode .pagination-link:hover,
.page-mode .pagination-link:focus {
    background-color: #555;
    color: #fff;
}

/* 🌟 선택된 페이지 (Active Page) */
.page-mode .active {
    background-color: #007bff; /* 강조색 (예: 파란색) */
    color: #fff; /* 흰색 텍스트 */
    font-weight: bold;
    pointer-events: none; /* 선택된 페이지는 클릭 불가 */
}






/*============ 검색창 스타일 ==================== */
.m-search-container {
    display: flex; /* 자식 요소들을 가로로 나열 */
    align-items: center; /* 수직 중앙 정렬 */
    width: 100%; /* 너비 설정 */
    max-width: 400px; /* 최대 너비 제한 (선택 사항) */
    margin: 20px auto; /* 중앙 배치 */
    border: 2px solid #5a5a5a; /* 전체 테두리 설정 (선택 사항) */
    border-radius: 8px; /* 전체 둥근 모서리 */
    overflow: hidden; /* 요소들이 밖으로 튀어나오는 것을 방지 */
    /*background-color: #f7f7f7;*/ /* 배경색 */

box-sizing: border-box;

}
/* Select 박스 */
.m-search-select {
    padding: 5px 10px;
    height: 40px; /* 높이를 맞춰줍니다 */
    border: none; /* 컨테이너 테두리가 있으므로 내부 테두리 제거 */
    border-right: 1px solid #ddd; /* 입력창과 구분선 추가 */
    background-color: #e9e9e9;
    color: #333;
    font-size: 1.1rem;
}

/* 입력창 (가장 중요한 중간 부분) */
.m-search-input {
	width:100%;
    height: 40px;
    border: none; /* 컨테이너 테두리가 있으므로 제거 */
    outline: none; /* 포커스 시 나타나는 기본 외곽선 제거 */
    /*background-color: transparent;*/ /* 컨테이너 배경색을 따르도록 투명 설정 */
    font-size: 1.2rem;
}

/* 검색 버튼 */
.m-search-button {
    min-width:80px;
 
    /*padding: 10px 20px;*/
    height: 40px;
    border: none; /* 컨테이너 테두리가 있으므로 제거 */
    background-color: #007bff; /* 강조 색상 */
    color: white;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.2s;
    /* 오른쪽 모서리만 둥글게 하고 싶다면 컨테이너에 border-radius 대신 개별 적용 */
}

/* 버튼 호버 효과 */
.m-search-button:hover {
    background-color: #0056b3;
}












/*
//////////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------
메뉴영역
--------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////
*/

.pktop-container {

/*	 background: #fff;*/
    
/*  	background: #0f0;
	border: 1px solid #bcbcbc;
*/

}



/*
//////////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------
중간 메인 콘텐츠
--------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////
*/

/* 메인페이지를 위해 풀 스크린 ============== */
.pkmiddle-container-full-black {
		background: #000;
        margin: 0px;
        padding: 0px;
}

.pkmiddle-container-full-white {
		background: #fff;
        margin: 0px;
        padding: 0px;
}


.pkmiddle-container-full-gray {
		background: #fbfbfb; /*#e3e3e3;*/
        margin: 0px;
        padding: 0px;
}


.pkmiddle-container-full {
/*		background: #fbfbfb;*/ /*#e3e3e3;*/
        margin: 0px;
        padding: 0px;
}

/* sub 페이지 공동 ========================== */
.pkmiddle-container {
		width: 1124px;

        margin: 10px auto;
        padding: 20px;
        border: 1px solid #bcbcbc;

}


.pkmiddle-header {
	padding: 5px;
	margin-bottom: 20px;
	/*border: 1px solid #bcbcbc;*/
	border-bottom: 1px solid #bcbcbc;
}

.pkmiddle-content {
	width: 770px; /* 원래 580px;*/
	padding: 20px;
	margin-bottom: 20px;
	float: right ;
	border: 1px solid #ccc;
}

.pkmiddle-sidebar {
	width: 260px; /* 원래 220 */
	padding: 10px;
	margin-bottom: 20px;
	float: left;
	border: 1px solid #ccc;
}


.pkmiddle-content-full {
	width: calc(100% - 40px);
	padding: 20px;
	margin-bottom: 20px;
	float: right ;
	border: 1px solid #ccc;
}


.pkmiddle-footer {
	clear: both;
	padding: 5px;
	/* border: 1px solid #bcbcbc; */
	border: 1px solid #fbfbfb; /*#e3e3e3;*/
}

	

/*
//////////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------
footer
--------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////
*/

.pkfooter-container {

min-width : 1200px; /* 1124 - (20*2) */

	clear:both;
/*	margin: 0px auto;*/
	background: #f0f0f0;
	color: #aaa;
}


.pkfooter-box {

	/*min-width : 1084px; *//* 1124 - (20*2) */
	width: 1124px;
	padding: 20px;
	background: #f0f0f0;
	margin: auto;
}

.pkfooter-bolder {
	font-weight: bolder;
	color: #4b4b4b;
}





/*
//////////////////////////////////////////////////////////////////////////
--------------------------------------------------------------------------
모바일 경우
--------------------------------------------------------------------------
//////////////////////////////////////////////////////////////////////////
*/


/* 
태블릿
@media all and (width:768px), (width:1024px)
모바일
@media ( max-width: 480px ) {
*/


@media ( max-width: 480px ) {

	
	.pktop-container {
		/* pc 메뉴 숨기기 */
		display:none; /* 칸 차지않아고 숨기기  ,   만약 칸차지하고 숨기려명 display:hidden 하면 됨 */
	}
	
	
	
	
	.pkmiddle-container {
		width: auto;
	}
	.pkmiddle-content {
		float: none;
		width: auto;
	}
	.pkmiddle-sidebar {
		float: none;
		width: auto;
		display:none; /* 칸 차지않아고 숨기기  ,   만약 칸차지하고 숨기려명 display:hidden 하면 됨 */
	}




/* ------작은화면일 경우 화면 자동줄이기--------------------------------------------------------------------*/


	.pkfooter-box {
		width: auto; /* 이렇게 해야 자동으로 화면에 따라 글씨가 라인피드 된다 */
		background: #000;
		
	}








}