/******************* TOP 영역 *******************/
* {
    box-sizing: border-box; /* 패딩, 보더 포함하여 너비 계산 */
    margin: 0;
    padding: 0;
}

body, div, td {
    font-family: Arial, sans-serif;
    color: #333;
    line-height: 1.6;
	font-size: 0.9em;
}

a {
    text-decoration: none;
    color: inherit; /* 부모 요소의 색상 상속 */
}

ul {
    list-style: none; /* 리스트 마커 제거 */
}

h2 {
	font-size: 1.4em;
}

tr {
	min-height: 25px;

}
td {
	font-size: 12px;
	padding: 5px;
}


/* --- 헤더 전체 영역 --- */
.main-header {
    width: 100%; /* 너비 100%로 변경 (구 1000px 고정 폭 해제) */
    background-image: url('/images/top/bg_top.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* 배경 이미지가 요소를 꽉 채우도록 */
    background-position: center top;
    padding-bottom: 20px; /* 로고 하단 패딩 대체 */
    /* min-height: 128px; */ /* 최소 높이 필요시 */
}

.header-inner {
    max-width: 1000px; /* 원래 1000px 너비는 내부 컨테이너로 적용 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 0 15px; /* 좌우 여백 (반응형 대비) */
}

/* --- 상단 유틸리티 링크 --- */
.utility-links {
    padding: 5px 0;
    text-align: left; /* 원래 왼쪽 정렬 */
}

.utility-links .link-list {
    display: flex;
    flex-wrap: wrap; /* 작은 화면에서 줄 바꿈 */
    gap: 10px; /* 링크 간 간격 */
    font-size: 12px;
    color: #fff; /* 링크 색상 */
}

.utility-links .link-list a {
    color: #a0a0a0;
    white-space: nowrap; /* 줄바꿈 방지 */
}

.utility-links .link-list a:hover {
    text-decoration: underline;
}

/* --- 글로벌 메뉴 및 로고, 검색 영역 --- */
.header-main-area {
    display: flex;
    flex-direction: column; /* 세로 방향으로 요소 정렬 */
    align-items: flex-end; /* 오른쪽 정렬 */
    padding-top: 10px; /* 상단 여백 */
}

.header-top-right-menu {
    display: flex;
    gap: 15px; /* 메뉴 간격 */
    font-size: 12px;
    color: #fff;
    margin-bottom: 10px; /* 하단 여백 */
}

.header-top-right-menu a {
    color: #e0e0e0;
    white-space: nowrap;
}

.header-top-right-menu a:hover {
    text-decoration: underline;
}

.header-bottom-area {
    display: flex;
    justify-content: space-between; /* 요소들을 양 끝으로 정렬 */
    align-items: flex-end; /* 하단 정렬 */
    width: 100%; /* 부모 너비 100% 사용 */
    flex-wrap: wrap; /* 작은 화면에서 줄바꿈 */
    padding-bottom: 20px; /* 로고 하단 패딩 대체 */
}

.site-logo {
    margin: 0;
    padding: 0;
    flex-shrink: 0; /* 축소되지 않도록 */
}

.site-logo img {
    max-width: 200px; /* 로고 이미지 크기 조정 */
    height: auto;
    display: block;
}

/* --- 검색 영역 --- */
.header-search-wrapper {
    flex-grow: 1; /* 남은 공간을 최대한 차지 */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* 좌측 정렬 */
    max-width: 500px; /* 검색 영역 최대 너비 설정 */
    min-width: 300px; /* 검색 영역 최소 너비 설정 (반응형 고려) */
    margin-left: 20px; /* 로고와의 간격 */
}

.global-search-form {
    width: 100%; /* 폼 너비 100% */
}

.search-input-group {
    display: flex;
    align-items: center;
    height: 33px; /* 높이 고정 */
    width: 100%;
}

.search-deco {
    width: 20px; /* 좌측 장식 이미지 너비 */
    height: 33px;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0; /* 축소 방지 */
}

.search-deco.left-deco {
    background-image: url('/images/top/search_left.jpg');
}

.search-deco.right-deco {
    width: 18px; /* 우측 장식 이미지 너비 */
    background-image: url('/images/top/search_end.jpg');
}

.search-fields-area {
    display: flex;
    align-items: center;
    background-image: url('/images/top/search_bg.jpg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    flex-grow: 1; /* 남은 공간 차지 */
    height: 100%; /* 부모 높이 100% */
    padding: 0 5px; /* 내부 패딩 */
}

.search-fields-area select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #ccc;
    padding: 4px 8px;
    height: 25px; /* 높이 조절 */
    margin-right: 5px;
    background-color: white;
    cursor: pointer;
    font-size: 14px;
}

.search-fields-area input[type="text"] {
    flex-grow: 1; /* 남은 공간 차지 */
    border: 1px solid #ccc;
    padding: 4px 8px;
    height: 25px;
    margin-right: 5px;
    font-size: 14px;
}

.search-fields-area input[type="text"]::placeholder {
	color: #d0d0d0; /* 더 연한 회색으로 변경 */
}

.search-submit-btn {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: flex; /* 이미지 중앙 정렬을 위해 */
    align-items: center;
    justify-content: center;
}

.search-submit-btn img {
    display: block;
    width: auto;
    height: 25px; /* 버튼 이미지 높이 */
}

/* 인기 검색어 */
.popular-searches {
    margin-top: 5px;
    padding-left: 20px; /* 좌측 여백 */
    font-size: 13px;
    color: #666;
    white-space: nowrap; /* 줄바꿈 방지 */
    overflow: hidden; /* 넘치는 내용은 숨김 */
    text-overflow: ellipsis; /* 넘치는 내용은 ... 처리 */
}

.popular-searches .popular-keyword {
    cursor: pointer;
    color: #4CAF50; /* 강조 색상 */
}

.popular-searches .popular-keyword:hover {
    text-decoration: underline;
}

/* TODAY 카운트 */
.today-visitors {
    flex-shrink: 0; /* 축소되지 않도록 */
    margin-left: 20px; /* 검색 영역과의 간격 */
    font-size: 14px;
    white-space: nowrap;
    color: red; /* 글자색 */
}

.today-visitors .visitor-count {
	color:red
}

.today-visitors .today-label {
    color: red;
    font-weight: bold;
}

/* --- 반응형 디자인 --- */
@media (max-width: 768px) {
    .header-inner {
        padding: 0 10px;
    }

    .utility-links .link-list {
        font-size: 12px;
        justify-content: center; /* 모바일에서 중앙 정렬 */
    }

    .header-main-area {
        align-items: center; /* 모바일에서 모든 요소를 중앙 정렬 */
    }

    .header-top-right-menu {
        justify-content: center;
        width: 100%;
        margin-bottom: 10px;
    }

    .header-bottom-area {
        flex-direction: column; /* 세로로 정렬 */
        align-items: center; /* 중앙 정렬 */
    }

    .site-logo img {
        max-width: 150px; /* 로고 크기 조정 */
        margin-top: 10px;
    }

    .header-search-wrapper {
        width: 100%;
        max-width: none; /* 최대 너비 해제 */
        margin-left: 0;
        margin-top: 15px; /* 로고와의 간격 */
    }
    
    .search-fields-area select,
    .search-fields-area input[type="text"] {
        font-size: 13px;
        height: 28px;
    }

    .popular-searches {
        padding-left: 0;
        text-align: center;
        margin-top: 10px;
        white-space: normal; /* 인기 검색어 줄바꿈 허용 */
    }

    .today-visitors {
        margin-left: 0;
        margin-top: 15px; /* 상단 요소와의 간격 */
        width: 100%;
        text-align: center;
    }
}



/******************* LEFT ************************/
/* 컨테이너 및 로그인 섹션 */
.panel-container {
	width: 250px; /* 고정 너비 유지 */
	margin-bottom: 10px;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 8px; /* 모서리 둥글게 */
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* 은은한 그림자 */
}

.login-section {
	padding: 10px;
	background-image: url('/images/left/login/bg_login.jpg'); /* 기존 배경 이미지 유지 */
	background-size: cover;
	background-position: center;
	color: #fff; /* 로그인 폼 텍스트 색상 */
}

.login-form input[type="text"],
.login-form input[type="password"] {
	width: 100%;
	padding: 8px 10px;
	margin-bottom: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
	color: #333; /* 입력 필드 텍스트 색상 */
}

.login-form .input-group {
	display: flex;
	gap: 5px;
	align-items: center;
	margin-bottom: 8px; /* 아이디/비밀번호 간격 */
}
.login-form .input-group input {
	flex-grow: 1; /* 입력 필드가 가능한 공간을 모두 차지하도록 */
	margin-bottom: 0; /* input-group 내부에서는 기본 margin-bottom 제거 */
}

.login-form .login-button {
	padding: 8px 12px;
	border: none;
	border-radius: 4px;
	background-color: #007bff; /* 파란색 계열 버튼 */
	color: white;
	font-size: 14px;
	white-space: nowrap; /* 버튼 텍스트가 줄바꿈되지 않도록 */
}
.login-form .login-button:hover {
	background-color: #0056b3;
}

.login-options {
	margin-top: 10px;
	display: flex;
	justify-content: space-between; /* 항목들을 양 끝으로 정렬 */
	align-items: center;
	font-size: 12px;
	color: #ccc; /* 텍스트 색상 */
}

.login-options a {
	color: #DD9999; /* 링크 색상 조정 */
	text-decoration: underline;
	white-space: nowrap; /* 링크 텍스트가 줄바꿈되지 않도록 */
}
.login-options label {
	display: flex;
	align-items: center;
	white-space: nowrap;
}
.login-options input[type="checkbox"] {
	margin-right: 5px;
}

.guest-login-button {
	width: 100%;
	padding: 10px 15px;
	background-color: #6c757d; /* 회색 계열 버튼 */
	color: white;
	border: none;
	border-radius: 4px;
	margin-top: 10px;
	font-size: 14px;
}
.guest-login-button:hover {
	background-color: #5a6268;
}

/* 로그인 후 정보 표시 섹션 */
.user-info-section {
	padding: 10px;
	background-color: #fff;
	color: #333;
}
.user-info-section p {
	margin-bottom: 10px;
	font-size: 14px;
}
.user-info-section .user-name {
	color: #5e8cd2;
	font-weight: bold;
}
.user-info-section .point-info {
	font-weight: bold;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.user-info-section .user-point {
	color: #5e8cd2;
	white-space: nowrap;
}
.logout-button {
	padding: 8px 12px;
	border: none;
	border-radius: 4px;
	background-color: #dc3545; /* 빨간색 계열 버튼 */
	color: white;
	font-size: 14px;
	white-space: nowrap;
}
.logout-button:hover {
	background-color: #c82333;
}

/* 공통 구분선 */
.divider {
	height: 1px;
	background-color: #e0e0e0;
	margin: 10px 0;
	width: 100%; /* 전체 너비 차지 */
}

/* 정보 배너 스타일 */
.info-banner {
	padding: 15px;
	background-color: #f8f9fa;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	margin-bottom: 10px;
}
.info-banner a {
	display: block; /* 링크 전체 영역 클릭 가능하도록 */
}
.info-banner strong {
	font-size: 16px;
	color: #333;
	display: block;
	margin-bottom: 5px;
}
.info-banner span {
	font-size: 12px;
	color: #666;
	line-height: 1.4;
}

/* 내비게이션 메뉴 스타일 */
.main-menu {
	margin-top: 0px; /* panel-container에 마진이 있으므로 여기서 제거 */
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
}
.main-menu > li {
	border-bottom: 1px solid #eee;
	text-align: left;
}
.main-menu > li:last-child {
	border-bottom: none;
}
.main-menu > li > a {
	display: block;
	padding: 12px 15px;
	font-size: 16px;
	font-weight: bold;
	color: #333;
	transition: background-color 0.2s ease;
}
.main-menu > li > a:hover {
	background-color: #f0f0f0;
}

.sub-menu {
	padding-left: 0px; /* 서브 메뉴 안쪽 여백 없앰 */
	max-height: 0; /* 초기에는 숨김 */
	overflow: hidden;
	transition: max-height 0.3s ease-out; /* 부드러운 애니메이션 */
	background-color: #f9f9f9;
}
.sub-menu.active {
	max-height: 500px; /* 열릴 때 높이 (콘텐츠 양에 따라 조절) */
}

.sub-menu li a {
	display: block;
	padding: 10px 25px; /* 들여쓰기 */
	font-size: 14px;
	color: #555;
	transition: background-color 0.2s ease;
}
.sub-menu li a:hover {
	background-color: #e9e9e9;
}

/* Google AdSense 광고 스타일 */
.adsbygoogle-container {
	margin: 10px 0;
	background-color: #f9f9f9;
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden; /* 광고 내용이 넘치지 않도록 */
	max-width: 250px;
}


/******************* 바디 영역 *******************/

/* --- 전체 페이지 컨테이너 (좌측, 중앙, 우측 컬럼) --- */
.page-container {
    display: flex; /* Flexbox 사용하여 컬럼 레이아웃 구성 */
    max-width: 1000px; /* 원본 width 1000px 유지 또는 유연하게 조정 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 20px 0; /* 상하 패딩 */
    gap: 20px; /* 컬럼 간 간격 */
    flex-wrap: wrap; /* 작은 화면에서 컬럼 줄 바꿈 */
}

.left-sidebar,
.right-sidebar {
    /* 각 사이드바의 너비는 common/left.php, common/right.php 내용에 따라 조절 */
    /* 예시: */
    flex-basis: 200px; /* 기본 너비 */
	max-width: 250px;
    flex-shrink: 0; /* 축소되지 않도록 */
    /* background-color: #f0f0f0; */ /* 시각적 구분용 */
    /* padding: 15px; */
}

.main-content {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 늘어남 */
    min-width: 510px; /* 최소 너비 설정 (콘텐츠가 깨지지 않도록) */
	max-width: 510px;
    /* background-color: #fff; */ /* 시각적 구분용 */
    /* padding: 20px; */
}

.main-content-notexright {
    flex-grow: 1; /* 남은 공간을 모두 차지하도록 늘어남 */
    min-width: 300px; /* 최소 너비 설정 (콘텐츠가 깨지지 않도록) */
	max-width: 700px;
    /* background-color: #fff; */ /* 시각적 구분용 */
    /* padding: 20px; */
}

/* --- 다운로드 TOP 5 섹션 --- */
.top-downloads {
    margin-bottom: 30px;
}

.section-title {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 15px;
	text-align: left
}

.download-list-grid {
    display: grid; /* Grid 레이아웃 사용 */
    grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)); /* 최소 90px, 최대 1fr로 유연하게 5개 컬럼 */
    gap: 10px; /* 아이템 간 간격 */
    border: 1px solid #EFEFEF;
    padding: 10px;
    min-height: 120px; /* 최소 높이 유지 */
    height: auto; /* 콘텐츠에 따라 높이 조절 */
}

.download-item {
    text-align: center;
    max-width: 90px; /* 각 아이템의 최대 너비 */
}

.download-item .download-link {
    display: block; /* 링크 전체 영역 클릭 가능 */
    text-decoration: none;
    color: #333;
}

.download-item .image-box {
    width: 80px; /* 이미지 컨테이너 크기 */
    height: 80px;
    margin: 0 auto 5px; /* 이미지 하단 여백 및 중앙 정렬 */
    overflow: hidden; /* 이미지 오버플로우 방지 */
    display: flex; /* 이미지 중앙 정렬 */
    align-items: center;
    justify-content: center;
}

.download-item .image-box img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
}

.download-item .download-name {
    max-height: 40px; /* 이름 높이 제한 */
    overflow: hidden;
    text-overflow: ellipsis; /* 넘치는 텍스트 ... 처리 */
    display: -webkit-box; /* 여러 줄 말줄임표 */
    -webkit-line-clamp: 2; /* 2줄까지만 표시 */
    -webkit-box-orient: vertical;
    font-size: 0.9em;
    line-height: 1.3;
}

.section-separator {
    margin: 20px 0; /* <P/> 태그 대체용 여백 */
    border: none; /* 기본 보더 제거 */
}

/* --- 최근 등록 자료 섹션 --- */
.recent-uploads {
    margin-bottom: 30px;
}

.recent-uploads-table {
    border: 1px solid #EFEFEF;
    min-height: 300px;
    height: auto; /* 콘텐츠에 따라 높이 조절 */
    display: flex;
    flex-direction: column; /* 세로 방향 정렬 */
}

.table-header, .table-row {
    display: flex; /* 컬럼들을 Flexbox로 정렬 */
    height: 25px; /* 행 높이 고정 */
    align-items: center; /* 세로 중앙 정렬 */
    padding: 0 5px;
}

.table-header {
    font-weight: bold;
    border-bottom: solid 1px silver;
    background-color: #f8f8f8; /* 헤더 배경색 */
}

.table-row {
    border-bottom: 1px solid #EFEFEF;
}

.table-row:last-child {
    border-bottom: none; /* 마지막 행 하단 보더 제거 */
}

/* 각 컬럼 너비 설정 (Flexbox) */
.col-license {
    flex-basis: 50px; /* 고정 너비 */
    flex-shrink: 0;
    text-align: center;
}

.col-name {
    flex-grow: 1; /* 남은 공간 차지 */
    overflow: hidden;
    white-space: nowrap; /* 줄바꿈 방지 */
    text-overflow: ellipsis; /* 넘치는 텍스트 ... 처리 */
    max-width: 340px; /* 원래의 최대 너비 */
}

.col-name a {
    display: block; /* 링크 영역 확장 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.col-category {
    flex-basis: 80px; /* 고정 너비 */
    flex-shrink: 0;
    text-align: center;
}

/* --- 공지사항/이벤트 섹션 --- */
.notice-event-section {
    width: 100%;
    background-image: url('/images/main/bg_notice_event.jpg');
    background-repeat: no-repeat;
    background-size: cover; /* 배경 이미지가 요소를 꽉 채우도록 */
    background-position: center;
    padding: 10px; /* 내부 패딩 */
    min-height: 181px; /* 최소 높이 유지 */
    display: flex; /* 내부 요소들을 Flexbox로 정렬 */
    flex-direction: column;
    justify-content: flex-start; /* 상단 정렬 */
}

.notice-event-header {
    display: flex;
    justify-content: space-between; /* 공지사항과 이벤트 타이틀 분리 */
    align-items: center;
    padding-top: 50px; /* 기존 height:50px <tr> 대체 */
    margin-bottom: 10px; /* 하단 여백 */
}

.notice-area, .event-area {
    display: flex;
    align-items: center;
}

.notice-area img, .event-area img {
    margin-right: 5px; /* 이미지와 텍스트 간 간격 */
}

.more-btn img {
    width: auto;
    height: 18px; /* 버튼 이미지 높이 조정 */
}

.notice-event-content {
    display: flex; /* 공지사항 목록과 이벤트 공간 분리 */
    gap: 20px; /* 간격 */
    flex-grow: 1; /* 남은 공간 차지 */
}

.notice-list-container {
    flex-basis: 320px; /* 공지사항 영역 너비 */
    flex-shrink: 0;
    padding-left: 5px; /* 좌측 여백 */
}

.notice-list {
    font-size: 14px;
}

.notice-item {
    display: flex;
    align-items: baseline; /* 텍스트 베이스라인 정렬 */
    height: 20px;
    line-height: 20px;
    overflow: hidden; /* 넘치는 내용 숨김 */
    white-space: nowrap;
    text-overflow: ellipsis;
}

.notice-dot {
    color: red;
    margin-right: 5px;
    flex-shrink: 0;
}

.notice-subject {
    flex-grow: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-right: 10px;
	text-align: left;
    color: #333; /* 링크 색상 */
	font-size: 0.9em;
}

.notice-subject:hover {
    text-decoration: underline;
}

.notice-date {
    flex-shrink: 0;
    color: #666;
    font-size: 0.9em;
}

.event-placeholder {
    flex-grow: 1; /* 남은 공간 차지 */
    /* 이벤트 영역에 대한 추가 스타일링 */
    /* background-color: rgba(255, 255, 0, 0.2); */ /* 시각적 구분용 */
}

/* --- 광고 자리 --- */
.ad-banner-area {
    margin-top: 10px;
    width: 100%; /* 너비 100% */
    overflow: hidden;
    /* height: 100px; */ /* 광고 높이 설정 (필요시) */
    /* background-color: #ccc; */ /* 임시 배경 */
    text-align: center;
}

/* --- 반응형 디자인 --- */
@media (max-width: 768px) {
    .page-container {
        flex-direction: column; /* 컬럼을 세로로 정렬 */
        padding: 10px;
        gap: 15px;
    }

    .left-sidebar,
    .right-sidebar,
    .main-content {
        flex-basis: auto; /* 고정 너비 해제 */
        width: 100%; /* 너비 100% */
        min-width: unset; /* 최소 너비 해제 */
    }

    .download-list-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); /* 작은 화면에서 아이템 크기 조정 */
        gap: 5px;
    }

    .download-item {
        max-width: 100%; /* 아이템 너비를 유연하게 */
    }

    .recent-uploads-table .table-header,
    .recent-uploads-table .table-row {
        height: auto; /* 모바일에서 내용에 따라 높이 유연하게 */
        flex-wrap: wrap; /* 컬럼들이 줄바꿈되도록 */
        padding: 5px;
    }

    .recent-uploads-table .col-license,
    .recent-uploads-table .col-category {
        flex-basis: auto; /* 고정 너비 해제 */
        width: 50%; /* 반씩 차지하도록 */
        margin-bottom: 5px;
    }
    
    .recent-uploads-table .col-name {
        width: 100%; /* 전체 너비 차지 */
        white-space: normal; /* 줄바꿈 허용 */
        text-overflow: unset; /* 말줄임표 제거 */
        max-width: none; /* 최대 너비 제한 해제 */
    }

    .notice-event-section {
        background-size: cover; /* 배경 이미지 조정 */
        padding: 10px;
    }
    
    .notice-event-header {
        flex-direction: column; /* 세로 정렬 */
        align-items: flex-start;
        padding-top: 20px;
        margin-bottom: 10px;
    }
    
    .notice-area, .event-area {
        width: 100%;
        margin-bottom: 10px;
    }

    .notice-event-content {
        flex-direction: column; /* 세로 정렬 */
        gap: 10px;
    }

    .notice-list-container, .event-placeholder {
        flex-basis: auto;
        width: 100%;
        padding-left: 0;
    }

    .notice-list .notice-item {
        flex-wrap: wrap; /* 항목 내용 줄바꿈 */
        height: auto;
        line-height: 1.5;
        padding: 2px 0;
    }
    .notice-list .notice-dot {
        margin-right: 3px;
        align-self: flex-start; /* 상단 정렬 */
    }
    .notice-list .notice-subject {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        margin-right: 5px;
    }
    .notice-list .notice-date {
        align-self: flex-start;
        margin-left: auto; /* 오른쪽으로 밀어내기 */
    }
}


/**************** cateview ***********************/
/* 카테고리 경로 (상단 제목) */
.category-path {
	font-size: 14px;
	color: #555;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.category-path img {
	height: 18px;
	width: auto;
}

.category-path span {
	font-weight: bold;
}

/* 목록 컨테이너 */
.program-list-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
	background-color: #fff;
	border: 1px solid #EFEFEF;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 8px rgba(0,0,0,0.03);
	max-width: 510px;
	margin: 0 auto;
}

/* 목록 헤더 (<th> 대체) */
.program-list-header {
	display: flex;
	background-color: #f8f8f8;
	padding: 10px 15px;
	border-bottom: 1px solid #eee;
	font-size: 13px;
	font-weight: bold;
	color: #333;
	text-align: center;
	box-sizing: border-box;
}

.program-list-header > div {
	flex: 1;
	padding: 0 5px;
}

/* 헤더 컬럼 너비 조정 */
.program-list-header .col-name { flex: 3; text-align: left; }
.program-list-header .col-info-group { flex: 1.5; }
.program-list-header .col-rating,
.program-list-header .col-license,
.program-list-header .col-size,
.program-list-header .col-download {
	display: none;
}


/* 각 프로그램 목록 아이템 */
.program-list-item {
	display: flex;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #f5f5f5;
	font-size: 12px;
	color: #444;
	transition: background-color 0.2s ease;
	box-sizing: border-box;
}

.program-list-item:last-child {
	border-bottom: none;
}

.program-list-item:hover {
	background-color: #fcfcfc;
}

/* 프로그램명 링크 스타일 */
.program-list-item .program-name-link {
	text-decoration: none;
	color: #007bff;
	line-height: 1.4;
	/* max-height: 2.8em; /* 2줄까지 표시 (원하는 만큼 조절) */
	/* overflow: hidden; */
	/* text-overflow: ellipsis; */
	/* display: -webkit-box; */
	/* -webkit-line-clamp: 2; */
	/* -webkit-box-orient: vertical; */
	white-space: normal; /* ★ 줄바꿈 허용 (기본값으로 변경) ★ */
	text-align: left; /* ★ 좌측 정렬 ★ */
	flex-grow: 1;
}

/* 이미지 스타일 */
.program-list-item .item-image {
	width: 120px;
	height: 120px;
	flex-shrink: 0;
	border-radius: 4px;
	overflow: hidden;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.program-list-item .item-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* 프로그램명 컬럼 (이미지와 텍스트 포함) */
.program-list-item .col-name {
	flex: 3;
	display: flex;
	align-items: center; /* 이미지와 텍스트 세로 중앙 정렬 */
	justify-content: flex-start;
	gap: 15px;
	padding-right: 15px;
}

/* 메타 정보 그룹 컬럼 */
.program-list-item .col-info-group {
	flex: 1.5;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center; /* 가로 중앙 정렬 유지 */
	gap: 5px;
	font-size: 11px;
	line-height: 1.2;
	text-align: center;
}

.program-list-item .col-info-group div span {
	font-weight: bold;
	color: #333;
}
.program-list-item .col-info-group .rating { color: #f39c12; }


/* 페이징 컨테이너 */
.pagination-container {
	width: 100%;
	max-width: 510px;
	text-align: center;
	padding-top: 15px;
	margin: 0 auto;
}

.pagination-container a {
	display: inline-block;
	padding: 5px 10px;
	margin: 0 3px;
	border: 1px solid #ddd;
	border-radius: 4px;
	text-decoration: none;
	color: #555;
	font-size: 13px;
	transition: background-color 0.2s, color 0.2s;
}

.pagination-container a:hover {
	background-color: #007bff;
	color: #fff;
	border-color: #007bff;
}

.pagination-container a.current-page {
	background-color: #007bff;
	color: #fff;
	border-color: #007bff;
	font-weight: bold;
}
.pagination-container .page-break {
	display: block;
	margin: 0 5px;
	color: #aaa;
}

/* 반응형 디자인 */
@media (max-width: 768px) {
	.program-list-container, .pagination-container {
		max-width: 100%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	.program-list-header, .program-list-item {
		padding: 10px;
		font-size: 11px;
	}
	.program-list-header > div,
	.program-list-item .item-col {
		 padding: 0 3px;
	}

	.program-list-item .item-image {
		width: 80px;
		height: 80px;
	}
	.program-list-item .col-name {
		gap: 8px;
	}
	.program-list-item .program-name-link {
		 font-size: 13px;
	}
	.program-list-item .col-info-group {
		 font-size: 10px;
		 gap: 3px;
	}
}

@media (max-width: 480px) {
	/* 아주 작은 모바일에서는 메타 정보 그룹을 숨기고, 제목만 넓게 */
	.program-list-header .col-info-group,
	.program-list-item .col-info-group {
		display: none;
	}
	.program-list-header .col-name,
	.program-list-item .col-name {
		flex: 1;
		padding-right: 0;
	}
	.program-list-item .item-image {
		width: 60px;
		height: 60px;
	}
}


/***************** lastreg *******************.


/* 섹션 제목 스타일 */
.section-title {
	font-size: 20px; /* 기존 h2보다 약간 작게 */
	color: #333;
	margin-bottom: 15px; /* 하단 여백 추가 */
	font-weight: bold;
	padding-bottom: 8px;
	border-bottom: 2px solid #eee; /* 하단 구분선 */
	max-width: 510px; /* ★ 요청하신 최대 너비 510px 적용 */
	margin-left: auto;
	margin-right: auto;
}

/* 최근 등록 자료 목록 컨테이너 */
.recent-list-container {
	display: flex;
	flex-direction: column; /* 항목들을 세로로 쌓음 */
	gap: 10px; /* 각 목록 항목 사이의 간격 */
	background-color: #fff;
	border: 1px solid #e0e0e0; /* 기존 EFEFEF에서 약간 진하게 */
	border-radius: 8px;
	overflow: hidden; /* 모서리 둥글게 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); /* 은은한 그림자 */
	max-width: 510px; /* ★ 요청하신 최대 너비 510px 적용 ★ */
	margin: 0 auto; /* 중앙 정렬 */
}

/* 각 최근 등록 자료 아이템 */
.recent-list-item {
	display: flex; /* ★ 이미지와 텍스트를 가로로 배치 (핵심) ★ */
	align-items: flex-start; /* 상단 정렬 (내용이 길어도 이미지 옆에) */
	padding: 15px; /* 내부 패딩 */
	border-bottom: 1px solid #f5f5f5; /* 항목 간 구분선 */
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box; /* 패딩이 너비에 포함되도록 */
}

.recent-list-item:last-child {
	border-bottom: none; /* 마지막 항목 하단 선 제거 */
}

.recent-list-item:hover {
	background-color: #fcfcfc; /* 호버 시 배경색 변경 */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); /* 호버 시 그림자 약간 진하게 */
}

.recent-list-item a {
	text-decoration: none;
	color: inherit; /* 링크 색상 부모로부터 상속 */
	display: flex; /* 내부 요소들을 위한 flex 컨테이너 */
	width: 100%; /* 링크가 전체 아이템 영역을 차지하도록 */
	gap: 15px; /* 이미지와 텍스트 컨테이너 사이의 간격 */
}

/* 이미지 컨테이너 (좌측) */
.recent-list-item .image-container {
	flex-shrink: 0; /* 너비 고정, 줄어들지 않도록 */
	width: 120px; /* ★ 이미지 너비 120px ★ */
	height: 120px; /* ★ 이미지 높이 120px ★ */
	overflow: hidden;
	border-radius: 4px;
	background-color: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.recent-list-item .image-container img {
	width: 100%;
	height: 100%;
	object-fit: contain; /* ★ 이미지 비율 유지하며 컨테이너에 맞춤 ★ */
}

/* 텍스트 정보 컨테이너 (우측) */
.recent-list-item .info-container {
	flex-grow: 1; /* 남은 공간을 모두 차지 */
	display: flex;
	flex-direction: column; /* 제목, 카테고리, 메타 정보 세로로 쌓음 */
	justify-content: space-between; /* 제목과 메타 정보 사이에 공간 배분 */
}

.recent-list-item .item-title {
	font-size: 16px; /* 기존 14px에서 약간 확대 */
	font-weight: bold;
	color: #007bff; /* 파란색 유지 */
	line-height: 1.4;
	margin-bottom: 5px; /* 카테고리와 간격 */
	text-align: left; /* ★ 제목 좌측 정렬 ★ */
	max-width:300px;
    white-space: word-wrap;      /* 텍스트를 한 줄에 강제로 표시 */
    overflow: hidden;         /* 요소의 경계를 넘어가는 내용을 숨김 */
    text-overflow: ellipsis;  /* 숨겨진 텍스트를 말줄임표(...)로 표시 */
}

.recent-list-item .category-info {
	font-size: 12px;
	color: #666;
	margin-bottom: 8px; /* 메타 정보와 간격 */
	line-height: 1.3;
	text-align: left;
}

.recent-list-item .meta-info {
	font-size: 11px; /* 기존 12px에서 약간 축소 */
	color: #888;
	display: flex;
	flex-wrap: wrap; /* 정보가 많아지면 줄바꿈 */
	gap: 3px 10px; /* 항목 간 간격 */
	margin-top: auto; /* info-container 하단으로 붙임 */
	justify-content: flex-start; /* ★ 좌측 정렬 ★ */
}

.recent-list-item .meta-info span {
	white-space: nowrap; /* 항목별 줄바꿈 방지 */
}

.recent-list-item .meta-info .rating { color: #f39c12; font-weight: bold;}
.recent-list-item .meta-info .downloads { font-weight: bold; color: #333; }

/* 광고 삽입 스타일 */
.adsense-container {
	width: 100%;
	max-width: 510px; /* ★ 요청하신 최대 너비 510px 적용 ★ */
	margin: 20px auto; /* 중앙 정렬 및 상하 여백 */
	text-align: center;
	background-color: #f9f9f9;
	padding: 15px; /* 내부 패딩 */
	border-radius: 8px;
	border: 1px solid #eee;
	box-sizing: border-box;
}

/* 검색 결과 없을 때 메시지 */
.no-results {
	text-align: center;
	padding: 30px 20px;
	font-size: 15px;
	color: #777;
	background-color: #f8f8f8;
	border: 1px solid #eee;
	border-radius: 8px;
	margin-top: 10px;
	width: 100%;
	box-sizing: border-box;
}

/* 반응형 디자인 */
@media (max-width: 768px) { /* 태블릿 세로 및 모바일 */
	.section-title, .recent-list-container, .pagination-container, .adsense-container {
		max-width: 100%; /* 모바일에서 전체 너비 사용 */
		padding-left: 10px; /* 좌우 패딩 */
		padding-right: 10px;
		box-sizing: border-box;
	}
	.recent-list-item {
		flex-direction: column; /* 모바일에서 이미지와 텍스트를 세로로 쌓음 */
		align-items: center; /* 세로로 쌓였을 때 가운데 정렬 */
		padding: 10px;
	}
	.recent-list-item a {
		 flex-direction: column; /* 링크 내부 요소도 세로 정렬 */
		 align-items: center;
		 gap: 10px;
	}
	.recent-list-item .image-container {
		width: 120px; /* 모바일에서 이미지 크기 유지 (원하는 대로) */
		height: 120px;
		margin-bottom: 10px; /* 이미지 아래 간격 */
		border-radius: 8px;
	}
	.recent-list-item .info-container {
		padding-left: 0; /* 패딩 제거 */
		padding-top: 0;
		align-items: center; /* 텍스트 내용 가운데 정렬 */
	}
	.recent-list-item .item-title,
	.recent-list-item .category-info {
		text-align: center; /* 모바일에서 텍스트 가운데 정렬 */
	}
	.recent-list-item .meta-info {
		justify-content: center; /* 모바일에서 메타 정보 가운데 정렬 */
		text-align: center; /* IE11 등 fallback */
	}
	.section-title {
		font-size: 18px;
		margin-bottom: 10px;
	}
	.adsense-container {
		padding: 10px;
		margin: 15px auto;
	}
}

@media (max-width: 480px) { /* 더 작은 모바일 */
	.recent-list-item .image-container {
		width: 100px;
		height: 100px;
	}
}

/***************** admin-menu *******************/
.admin-menu-container {
    width: 980px; /* 기존 너비 유지 */
    /* min-height를 사용하면 내용이 많아질 때 자동으로 늘어납니다. */
    min-height: 40px; /* 아이콘 및 패딩 고려하여 높이 증가 */
    background-color: #ffffff; /* 깔끔한 흰색 배경 */
    border: 1px solid #e0e0e0; /* 부드러운 테두리 */
    border-radius: 8px; /* 모서리 둥글게 */
    padding: 10px 15px; /* 내부 여백 증가 */
    margin-bottom: 15px; /* 아래 여백 증가 */
    display: flex; /* Flexbox 활성화 */
    align-items: center; /* 세로 중앙 정렬 */
    gap: 20px; /* 메뉴 항목 사이의 간격 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* 은은한 그림자 */
    overflow: hidden; /* 내용이 넘칠 경우 처리 */
}

.admin-menu-item {
    font-size: 16px; /* 폰트 크기 약간 키움 */
    font-weight: 500; /* 폰트 두께 조절 */
    color: #3498db; /* 부드러운 파란색 */
    text-decoration: none; /* 밑줄 제거 */
    padding: 5px 0; /* 세로 패딩 */
    transition: color 0.3s ease, transform 0.3s ease; /* 호버 시 색상/변형 애니메이션 */
    display: flex; /* 아이콘과 텍스트 정렬을 위해 Flexbox 사용 */
    align-items: center; /* 아이콘과 텍스트 세로 중앙 정렬 */
    white-space: nowrap; /* 메뉴 항목이 줄바꿈되지 않도록 */
}

.admin-menu-item i {
    margin-right: 8px; /* 아이콘과 텍스트 사이 간격 */
    font-size: 18px; /* 아이콘 크기 */
    color: #2980b9; /* 아이콘 색상 */
}

.admin-menu-item:hover {
    color: #21618c; /* 호버 시 더 진한 파란색 */
    transform: translateY(-2px); /* 약간 위로 떠오르는 효과 */
}

.admin-menu-item:active {
    color: #1a4f6d; /* 클릭 시 색상 */
    transform: translateY(0); /* 클릭 시 원위치 */
}


/* 올드 */
/*
IMG {border:none;}

a {selector-dummy:expression(this.hideFocus=true);}
*/
/*
body,td,form,center,option,pre,blockquote,div {font-size:12px;}
*/

SELECT {background-color: #FFFFFF; font-size:12px; font-family:"TAHOMA"; line-height:100%;border:0;}

A:link    {color:#222222;text-decoration:none;}
A:visited {color:#222222;text-decoration:none;}
A:active  {color:#222222;text-decoration:none;}
A:hover   {color:#000000;font-weight:none;text-decoration:underline;}

body  {
scrollbar-face-color: #ffffff; 
scrollbar-shadow-color: #cccccc; 
scrollbar-highlight-color: #ffffff; 
scrollbar-3dlight-color: #cccccc; 
scrollbar-darkshadow-color: #ffffff; 
scrollbar-track-color: #ffffff; 
scrollbar-arrow-color: #CCCCCC;
}

/* main layout table */
.container {
	width:1000px;
	max-width:1000px;
	border:0px;
	cell-padding:0px;
	cell-spacing:0px;
}

.container .left {
	width:260px;
	max-width:260px;
	border:0px;
	cell-padding:0px;
	cell-spacing:0px;
	vertical-align:top;
}

.container .main {
	width:590px;
	max-width:590px;
	border:0px;
	cell-padding:0px;
	cell-spacing:0px;
	vertical-align:top;
}

.container .main2span {
	width:730px;
	max-width:730px;
	border:0px;
	cell-padding:0px;
	cell-spacing:0px;
	vertical-align:top;
}

.container .right {
	width:150px;
	border:0px;
	cell-padding:0px;
	cell-spacing:0px;
	vertical-align:top;
	overflow:hidden
}


/* 버튼 */
.btn {cursor:pointer;}


/* INPUT BOX */
input   {font-size:12px; font-family: "TAHOMA"; text-align:left; color:#444444; border: 1px solid #C3C4C4;}
textarea   {font-size:12px; font-family: "TAHOMA"; text-align:left; color:#444444; border: 1px solid #C3C4C4;}
input.text   {font-size:12px; font-family: "TAHOMA"; text-align:left; color:#444444; border: 1px solid #C3C4C4;}
input.number   {font-size:12px; font-family: "TAHOMA"; text-align:right; color:#444444; border: 1px solid #C3C4C4;}
input.text_nobox   {font-size:12px; font-family: "TAHOMA"; text-align:left; color:#444444; background-color:transparent; border: 0;}
input.number_nobox   {font-size:12px; font-family: "TAHOMA"; text-align:right; color:#444444; background-color:transparent; border: 0;}


/* BUTTON */
input.button80 {width:80px;height:26px;border:0px;padding:0px;cursor:pointer;background:url('../images/bg_btn80.jpg') no-repeat;text-align:center;}
input.button40 {width:40px;height:26px;border:0px;padding:0px;cursor:pointer;background:url('../images/bg_btn40.jpg') no-repeat;text-align:center;}

input.orange42 {width:42px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_orange42.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}
input.orange63 {width:63px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_orange63.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}
input.orange84 {width:84px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_orange84.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}

input.purple42 {width:42px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_purple42.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}
input.purple63 {width:63px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_purple63.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}
input.purple84 {width:84px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_purple84.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}

input.blue42 {width:42px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_blue42.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}
input.blue63 {width:63px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_blue63.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}
input.blue84 {width:84px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/bg_button_blue84.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}

input.search_blue {width:43px;height:19px;border:0px;padding:3px;cursor:pointer;background:url('../images/btn_search_blue.jpg') no-repeat;text-align:center;color:white;font:bold 8pt "ARIAL"}

/* 테이블 */
.grid tr.header {background:url('../images/bg_board_headline.jpg');}
.grid tr td.header {font:bold 12px "돋움";color:#444444}
.grid tr td.data {border-bottom:solid 1px #EEEEEE;font:12px "돋움"}

.state tr td.line_header {background:#CCCCCC;color:#444444;border-bottom:solid 1px #ABABAB;font:bold;text-align:center}
.state tr td.line_data {background:#FFFFFF;color:#666666;border-bottom:solid 1px #ABABAB;text-align:center}

.info tr td.header {background:#DDDDDD;color:#444444;padding:5px;padding-left:10px;border-left:solid 1px #ABABAB;border-bottom:solid 1px #ABABAB;}
.info tr td.data {background:#FFFFFF;color:#666666;padding:5px;padding-left:10px;border-left:solid 1px #ABABAB;border-bottom:solid 1px #ABABAB;}


/* LEFT MENU */
div.submenu {width:200px;height:25px;font:bold 10pt '돋움체';background-color:#63a6f8;color:#FEFEFE;border:solid 1px #ABABAB;padding:6px;padding-left:20px;text-align:left;margin-bottom:2px;}


/* 이미지 박스 규격화 */
.image_box80 {
    display: flex; /* Flexbox 컨테이너로 설정 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 (선택 사항) */
    height: 80px; /* 부모 컨테이너의 높이 지정 필수 */
    border: 1px solid #ccc; /* 예시를 위한 테두리 */
}
.image_box80 img{
    max-width:78px;
	max-height:78px;
	object-fit: contain;
}

.image_box120 {
    display: flex; /* Flexbox 컨테이너로 설정 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 (선택 사항) */
	max-width: 120px;
    height: 120px; /* 부모 컨테이너의 높이 지정 필수 */
    border: 1px solid #ccc; /* 예시를 위한 테두리 */
}
.image_box120 img{
    max-width:118px;
	max-height:118px;
	object-fit: contain;
}

.image_box200 {
    display: flex; /* Flexbox 컨테이너로 설정 */
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: center; /* 수평 중앙 정렬 (선택 사항) */
	max-width: 200px;
    height: 200px; /* 부모 컨테이너의 높이 지정 필수 */
    border: 1px solid #ccc; /* 예시를 위한 테두리 */
}
.image_box200 img {
    max-width:198px;
	max-height:198px;
	object-fit: contain;
}

#content-view {
	line-height: 1.7;
	font-size: 1.2em
}

#content-view ul {
	list-style: disc;
	padding-left: 2em;
}

#content-view ol {
	padding-left: 1em;
}

#content-view li {
	margin-top: 5px
}

#content-view img {
	margin: 20px;
	width: 90%
}

hr {
	margin: 20px
}

#content-view h3 {
	margin-top: 20px;
	margin-bottom: 10px
}

#content-view * {
	line-height: 1.7;
}

/* -----------------------------------
   공통 버튼 스타일 정의 (CSS)
   ----------------------------------- */
.action-button {
    /* 레이아웃 및 텍스트 공통 설정 */
    display: inline-block;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: bold;
    color: white; /* 모든 버튼의 텍스트 색상을 흰색으로 통일 */
    margin-left: 8px;
    cursor: pointer; /* 클릭 가능한 요소임을 표시 */
    transition: background-color 0.2s; /* 마우스 오버 시 부드러운 전환 효과를 위해 추가 */
}

/* 마우스 오버 시 스타일 (선택적) */
.action-button:hover {
    opacity: 0.9;
}