/* 기본 스타일 */
body, .section-container, .section-header, .section-list, .webtoon-list a {
    font-family: 'gang_b', sans-serif;
}

/* 검색창 스타일 */
.header-search {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    max-width: 450px;
    font-family: 'gang_b', sans-serif;
}

.header-search .input-group {
    display: flex;
    align-items: center;
}

.header-search select {
    border: 4px solid #FF6C00;
    padding: 10px;
    font-size: 16px;
    background-color: #fff;
    color: #000;
    outline: none;
    cursor: pointer;
    height: 45px;
    width: 120px !important;  
    max-width: 120px !important;
    margin-right: 5px;
    vertical-align: middle;
}

.header-search .form-control {
    border: 4px solid #323C46;
    padding: 10px;
    width: 400px !important;  /* !important 추가 */
    font-size: 16px;
    outline: none;
    height: 45px;
    margin-right: 5px;
    vertical-align: middle;
}

.header-search .btn {
    background-color: #323C46;
    color: white;
    border: 4px solid #323C46;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    height: 45px;
    vertical-align: middle;
    font-weight: bold;  /* 글자 굵게 */
    min-width: 80px;    /* 버튼 최소 너비 */
    display: flex;      /* Flex 레이아웃 사용 */
    align-items: center;  /* 세로 중앙 정렬 */
    justify-content: center;  /* 가로 중앙 정렬 */
    letter-spacing: 1px;  /* 자간 간격 */
}

/* 호버 효과 개선 */
.header-search .btn:hover {
    background-color: #1a1a1a;
    transition: all 0.2s ease;  /* 부드러운 전환 효과 */
}
/****** 검색창 끝 ******/

/****** 배너 시작 ******/
	
	/* 배너 전체 컨테이너 */
	.banner-container {
		display: flex;
		justify-content: center;
		align-items: center;
		max-width: 1190px; /* 원하는 전체 최대 너비 */
		margin: 0 auto;
		padding: 2px 0; /* 배너 위아래 간격을 줄임 */
		gap: 3px;
		box-sizing: border-box;
	}

	/* 배너 행 설정 */
	.banner-row {
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* 4열로 배치 */
		gap: 5px; /* 배너 좌우 간격을 줄임 */
		width: 100%;
		margin: 0; /* 배너 아이템 마진 제거 */
	}

	/* 각 배너 아이템 */
	.banner-item {
		overflow: hidden;
		width: 100%;
		height: auto;
	}

	/* 배너 이미지 */
	.banner-img {
    width: 100%; /* 그리드 항목의 너비에 맞추기 */
    max-width: 300px; /* 원하는 최대 너비로 조정 */
    height: auto; /* 이미지 비율 유지 */
	}

	/* 첫 번째 배너에만 위쪽 마진을 주기 */
	.banner-container:first-child {
		margin-top: 10px; /* 첫 번째 배너 위쪽 공간 추가 */
	}
/****** 배너 끝 ******/


	/* 기본 스타일 */
	.site-header {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 10px 20px;
		margin-bottom: 20px;
		margin-top: 50px;
		font-family: 'gang_b', sans-serif;
		position: relative;
		max-width: 1200px; /* 헤더 영역을 특정 너비로 제한 */
		margin-left: auto;
		margin-right: auto;
	}

	/* 그리드 컨테이너 (PC 전용) */
	.grid-container {
		display: grid;
		grid-template-columns: repeat(4, 1fr); /* 리스트 4줄 나타내는 것 */
		gap: 5px;
		max-width: 1200px;
		margin: 0 auto;
		padding: 10px;
	}



/* 헤더 전체 영역 끝 */


/* 로고 컨테이너 */
.logo-container {
    position: absolute;
    left: 80px;
    top: 50%;
    transform: translateY(-50%);
}

/* 로고 이미지 크기 조정 */
.logo-container img {
    width: 130px; /* 원하는 너비로 조정 */
    height: auto; /* 높이는 자동으로 설정하여 비율 유지 */
    max-width: 100%; /* 부모 요소의 너비에 맞춰서 크기 조절 */
}

/* 모바일 헤더 로고 스타일 */
.mobile-logo {
    max-width: 100%; /* 모바일 화면 너비에 맞게 로고 크기 조정 */
    height: auto; /* 비율 유지 */
    max-height: 25px; /* 로고의 최대 높이 제한 (필요에 따라 조정) */
    display: block;
    margin: 0 auto; /* 로고를 중앙 정렬 */
}






/* 검색창 영역 */
.search-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    max-width: 600px;
    font-family: 'gang_b', sans-serif;
}

/* 로고 크기 조정 */
.site-logo {
    width: 170px;
    height: auto;
}


/* 드롭다운 스타일 */
.search-box select {
    border: 4px solid #4d4d4d;
    padding: 10px;
    font-size: 16px;
    background-color: #fff;
    color: #000;
    outline: none;
    cursor: pointer;
    height: 45px;
    width: 130px;
    margin-right: 5px;
    vertical-align: middle;
}

/* 검색 입력창 스타일 */
.search-box input[type="text"] {
    border: 4px solid #4d4d4d;
    padding: 10px;
    width: 350px;
    font-size: 16px;
    outline: none;
    height: 45px;
    margin-right: 5px;
    vertical-align: middle;
}

/* 검색 버튼 스타일 */
.search-box button {
    background-color: #4d4d4d;
    color: white;
    border: 4px solid #4d4d4d;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    height: 45px;
    vertical-align: middle;
}


/* 링크몬 {google, naver, daum 등 메인 메뉴 스타일 */
.icon-link-container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px; /* 아이콘 간의 간격 */
    padding: 1px 1px; /*상하 간격 */
    line-height: 1;
    border: 1px solid #ddd;
    background-color: #f8f9fa; /* 아주 옅은 회색 배경 */
    max-width: 1190px;
    margin: 0 auto 2px; /* 하단 마진을 줄임 */
    box-sizing: border-box;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}




/* 아이콘 스타일 */
/* 공통 아이콘 스타일 */
.icon-link {
    width: 65px; /* 기본 아이콘 크기 */
    height: auto;
    transition: transform 0.3s ease; /* 호버시 부드러운 효과 */
}

/* 마우스 호버 시 확대 효과 */
.icon-link:hover {
    transform: scale(1.3); /* 호버 시 확대 */
}

/* 각 아이콘에 대해 개별 크기 설정 (필요한 크기로 조정) */

/* Google 아이콘 */
.google-icon {
    width: 65px;
}

/* Naver 아이콘 */
.naver-icon {
    width: 60px;
}

/* Daum 아이콘 */
.daum-icon {
    width: 55px;
}

/* Nate 아이콘 */
.nate-icon {
    width: 70px;
}

/* Zum 아이콘 */
.zum-icon {
    width: 65px;
}

/* YouTube 아이콘 */
.youtube-icon {
    width: 85px;
}

/* Instagram 아이콘 */
.instagram-icon {
    width: 85px;
}

/* Facebook 아이콘 */
.facebook-icon {
    width: 85px;
}


/* 테마 스타일 */
.google-theme select,
.google-theme input[type="text"],
.google-theme button {
    border-color: #323C46;
    color: #323C46;
}
.google-theme button {
    background-color: #323C46;
    color: #fff;
}
.google-theme button:hover {
    background-color: #1a1a1a;
}

/* 네이버 테마 */
.naver-theme select,
.naver-theme input[type="text"],
.naver-theme button {
    border-color: #1ec800;
    color: #1ec800;
}
.naver-theme button {
    background-color: #1ec800;
    color: #fff;
}
.naver-theme button:hover {
    background-color: #19a600;
}

/* 다음 테마 */
.daum-theme select,
.daum-theme input[type="text"],
.daum-theme button {
    border-color: #FF6C00;
    color: #FF6C00;
}
.daum-theme button {
    background-color: #FF6C00;
    color: #fff;
}
.daum-theme button:hover {
    background-color: #e65c00;
}

/* 네이트 테마 */
.nate-theme select,
.nate-theme input[type="text"],
.nate-theme button {
    border-color: #ff5a5a;
    color: #ff5a5a;
}
.nate-theme button {
    background-color: #ff5a5a;
    color: #fff;
}
.nate-theme button:hover {
    background-color: #e04b4b;
}

/* ZUM 테마 */
.zum-theme select,
.zum-theme input[type="text"],
.zum-theme button {
    border-color: #0068b7;
    color: #0068b7;
}
.zum-theme button {
    background-color: #0068b7;
    color: #fff;
}
.zum-theme button:hover {
    background-color: #00549a;
}

/* 유튜브 테마 */
.youtube-theme select,
.youtube-theme input[type="text"],
.youtube-theme button {
    border-color: #FF0000;
    color: #FF0000;
}
.youtube-theme button {
    background-color: #FF0000;
    color: #fff;
}
.youtube-theme button:hover {
    background-color: #CC0000;
}

/* Bing 테마 */
.bing-theme select,
.bing-theme input[type="text"],
.bing-theme button {
    border-color: #008373;
    color: #008373;
}
.bing-theme button {
    background-color: #008373;
    color: #fff;
}
.bing-theme button:hover {
    background-color: #00695c;
}




/**** 모바일 메뉴 ****/
.menu-item {
    display: block;
    width: 100%;
    padding: 5px 10px;
    background-color: #fafafa;
    color: #333;
    font-weight: bold;
    text-decoration: none;
    border: 0.5px solid #ddd;
    text-align: center;
    font-size: 10px; /* font size */
    font-family: 'gang_b', sans-serif;
}

/* 활성화된 메뉴 항목 (클릭된 메뉴) */
.menu-item.active {
    background-color: crimson;
    color: white;
}

/* 마우스를 올렸을 때 배경 색상 변경 */
.menu-item:hover {
    background-color: #ff4c4c;
    color: white;
}



/* 모바일 스타일 (화면 너비 768px 이하) */
@media (max-width: 768px) {
    /* 모바일 메뉴 스타일 */
	/**** 모바일 메뉴 ****/
	.row.menu-grid {
        display: flex;
        flex-wrap: wrap;
    }

	/* 기본 레이아웃 - 6열 */
	.col-2 {
		flex: 0 0 16.66%;
		max-width: 16.66%;
		padding: 0px;
	}
	
	
	
	.site-header {
			display: none; /* 모바일에서는 헤더 숨김 */
	}

	.icon-link-container {
	display: none;
	}

    /* 리스트를 두 열로 나누기 */
    .banner-container {
        grid-template-columns: repeat(2, 1fr); /* 모바일에서는 2열로 */
    }
	

    /* 섹션 자체도 너비를 100%로 설정 */
    .section-container {
        width: 100%;
    }
	
	.banner-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr); /* 모바일에서 2열로 배너 배치 */
		gap: 2px; /* 배너 간 간격 */
		padding: 2px 0; /* 배너 위아래 간격을 줄임 */
		width: 100%;
	}

	/* 배너 이미지 */
	.banner-img {
		width: 100%;
		height: auto;
		object-fit: contain;
	}

	
	.search-container {
        width: 90%; /* 모바일에서 90% 너비로 설정 */
    }

    /* 섹션 헤더 스타일 */
    .section-header {
        background-color: #fff;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 5px;
        padding-right: 10px;
        font-size: 1.2em;
        font-weight: bold;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        gap: 8px;
        box-sizing: border-box;
        width: 100%;
    }

    .grid-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
		padding: 0;
        gap: 4px;
    }

    .section-container {
        width: 100%;
        margin: 2px auto; /* 컨테이너 간 상하 줄이기 */
        padding: 0;
		padding-left: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border: 1px solid #ddd;
        border-radius: 2px;
		margin-bottom: 5px;
        background-color: #fff;
    }

	/* 리스트 스타일 */
	.webtoon-list, 
	.adult-list, 
	.bet-list, 
	.drama-list, 
	.torrent-list, 
	.casino-list, 
	.toto-list, 
	.sports-list, 
	.verified-list, 
	.op-list, 
	.community-list, 
	.adult-toys-list, 
	.korean-exp-list {
    /* 원하는 스타일 적용 */
    margin: 8px 0; /* 예시: 상하 여백을 5px로 설정 */
    padding: 0; /* 패딩 제거 */
    list-style: none; /* 기본 리스트 스타일 제거 */
}

	/* 각 리스트 항목 스타일 - 오른쪽으로 이동 */
	.webtoon-list li, 
	.adult-list li, 
	.bet-list li, 
	.drama-list li, 
	.torrent-list li, 
	.casino-list li, 
	.toto-list li, 
	.sports-list li, 
	.verified-list li, 
	.op-list li, 
	.community-list li, 
	.adult-toys-list li, 
	.korean-exp-list li {
		line-height: 2.5; /* 줄 간격 설정 */
		padding: 0; /* li 내부 여백 제거 */
		margin: 0; /* li 외부 여백 제거 */
		padding-top: 35px;
		padding-bottom: 35px;
		font-size: 1.0em;
		display: flex;
		align-items: flex-start;
		padding-left: 10px; /* 리스트 항목들을 오른쪽으로 이동 */
	}

}