/* themes/default/css/style.css */

body {
    margin: 0;
    font-family: 'Noto Sans KR', Arial, sans-serif;
    background: var(--bg-basic);
}
.container{
    max-width: 1600px;
    margin: 30px auto;
    padding: 0px;
    border-radius: 8px;
}

.main_nav{
	padding:30px 20px;
	background: var(--bg-main);
    border:1px solid var(--border-main);
    color: var(--text-main) !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* 큰 원 패턴 추가 */
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 200px, transparent 201px),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 150px, transparent 151px),
        linear-gradient(135deg, var(--bg-info), var(--bg-info-hover));
    background-color: var(--bg-main); /* Fallback */
}

.footer{
padding:0 20px;
	background: var(--bg-main);
    border:1px solid var(--border-main);
    color: var(--text-main) !important;
	box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* 큰 원 패턴 추가 */
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 200px, transparent 201px),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 150px, transparent 151px),
        linear-gradient(135deg, var(--bg-info), var(--bg-info-hover));
    background-color: var(--bg-main); /* Fallback */
}

.main_nav a{
    color: var(--text-main-link) !important;
}

.main_nav a:hover{
    color: var(--text-main-link-hover) !important;
}

.btn-main {
    background: var(--bg-main-btn);
    border:1px solid var(--border-main-btn);
    border-radius: 5px;
    color: var(--text-main-btn) !important;
    padding:5px 10px;

}

.btn-main button{
    color: var(--text-main-btn) !important;

}

.btn-main button:hover{
    color: var(--text-main-btn-hover) !important;

}

.btn-main:hover{
    background: var(--bg-main-btn-hover);
    color: var(--text-main-btn-hover);

}

.btn-main a{
    color: var(--text-main-btn-link);

}

.btn-main a:hover{
    color: var(--text-main-btn-link-hover);

}



.btn_main_sub{
    background: var(--bg-btn-warning) !important;
    border:1px solid var(--border-btn-main-sub);
    border-radius: 5px;
    color: var(--text-btn-main-sub) !important;
    padding: 3px 10px;
}

.btn_main_sub:hover{
    background: var(--bg-btn-main-sub-hover) !important;
    color: var(--text-btn-main-sub-hover) !important;
}

.btn_main_sub a{
    color: var(--text-btn-main-sub-link);
}



.btn-middle{
    background: var(--bg-btn-middle);
    border:1px solid var(--border-btn-middle);
    border-radius: 5px;
    color: var(--text-btn-middle) !important;
    padding: 3px 10px;

}

.btn-middle:hover{
    background: var(--bg-btn-middle-hover);
    color: var(--text-btn-middle-hover);

}
.btn-middle a{
    color: var(--text-btn-middle-link);

}



.btn-middle-danger{
    background: var(--bg-btn-middle-danger);
    color: var(--text-btn-middle-danger);
    padding:3px 10px;
    border-radius: 5px;

}
.btn-middle-danger:hover{
    background: var(--bg-btn-middle-danger-hover);
    color: var(--text-btn-middle-danger-hover);
}
.btn-middle-danger a{
    color: var(--text-btn-middle-danger-link);
    font-size: 1.0rem;

}

.btn-middle-danger a:hover{
    color: var(--text-btn-middle-danger-link-hover);
}


.main_btn{
	background: var(--bg-main-btn);
	color: var(--text-main-btn);
	border:1px solid  var(--border-main-btn);
}
.main_btn:hover{
	background: var(--bg-main-btn-hover);
	color: var(--text-main-btn-hover);
	border:1px solid  var(--border-main-btn-hover);
}
.main_btn a{
	color: var(--text-main-btn-link);
}
.main_btn a:hover{
	color: var(--text-main-btn-link-hover);
}


.btn-main-sub{
	background: var(--bg-main-btn-sub);
	color: var(--text-main-btn-sub);
	border:1px solid  var(--border-main-btn-sub);
}
.btn-main-sub:hover{
	background: var(--bg-main-btn-sub-hover);
	color: var(--text-main-btn-sub-hover);
	border:1px solid  var(--border-main-btn-sub-hover);
}
.btn-main-sub a{
	color: var(--text-main-btn-sub-link);
}
.btn-main-sub a:hover{
	color: var(--text-main-btn-sub-link-hover);
}


.main_btn_active{
	background: var(--bg-main-btn-active);
	color: var(--text-main-btn-active);
	border:1px solid  var(--border-main-btn-active);
}

.main_btn_active a{
	color: var(--text-main-btn-active-link);
}


.main_btn_active:hover{
	background: var(--bg-main-btn-active-hover);
	color: var(--text-main-btn-active);
    border:1px solid  var(--border-main-btn-active-hover);
}

.btn_warning{
    background: var(--bg-btn-warning) !important;
    border:1px solid var(--border-btn-warning);
    border-radius: 5px;
    color: var(--text-btn-warning) !important;
    padding: 3px 10px;
}

.btn_warning:hover{
    background: var(--bg-btn-warning-hover) !important;
    color: var(--text-btn-warning-hover) !important;
}

.btn_warning a{
    color: var(--text-btn-warning-link);
}


.mp_badge{
    background: var(--bg-basic-badge) !important;
    color: var(--text-basic-badge) !important;
    margin:5px 5px 0 0;
    padding:3px 7px;
    font-size:0.7rem;
    font-weight:bold;
    border-radius: 3px;
}

.mp_badge a{
    color: var(--text-basic-badge-link) !important;    
}

.mp_stat_box{
    color: var(--text-info);
    padding: 50px 30px;
    margin:0 0 30px 0;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* 큰 원 패턴 추가 */
    background-image: 
        radial-gradient(circle at 100% 0%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 200px, transparent 201px),
        radial-gradient(circle at 0% 100%, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 150px, transparent 151px),
        linear-gradient(135deg, var(--bg-info), var(--bg-info-hover));
    background-color: var(--bg-main); /* Fallback */
}


.cate_stat_box{
    color: var(--text-main);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    /* 대각선 격자무늬 추가 */
    background-image: 
        repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255,255,255,0.03) 5px, rgba(255,255,255,0.03) 20px),
        repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(255,255,255,0.03) 5px, rgba(255,255,255,0.03) 20px),
        linear-gradient(135deg, var(--bg-primary), var(--bg-primary-hover));
    background-color: var(--bg-main); /* Fallback */
}

.row_box{
    border:1px solid var(--border-row-box);
    margin:0 0 20px 0;    
    background-color: var(--bg-row-box); /* Fallback color */
    /*background-image: 
        linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px),
        linear-gradient(to bottom, var(--bg-basic), var(--bg-main-sub));
    background-size: 20px 20px, 20px 20px, 100% 100%;
	*/
    
	padding:50px;
    border-radius: 10px;;
}

@media (max-width: 1300px){
    .row_box{
        background-color: var(--bg-basic); /* Fallback color */
        border:0px solid var(--border-basic);
        margin:0 0 0px 0;
		padding:0px;
}
}

.form-control,.form-select{
	background: var(--bg-main-input);
	color: var(--text-main-input);
	border:1px solid  var(--border-main-input);
}



.form-control::placeholder {
    color:var(--text-main-input-placeholder);
}


#sch_stx{
background:var(--bg-main-input);
}

input::placeholder {
 	color: #bdabab;
}

#sch_stx::placeholder {
    color:var(--text-main-input-placeholder);
}


a{
	color: var(--text-basic-link);
	text-decoration:none !important;
}

.user-popover-trigger {
    color: var(--text-basic-link) !important;
}

.breadcrumb{

    color: var(--text-basic) !important;
}

.breadcrumb a{

    color: var(--text-basic-link);
}

.breadcrumb-item.active{

    color: var(--text-basic);
}

.navbar {
    background: var(--bg-main);
    color: var(--text-main);
}

.nav-item{

    color:var(--text-main);
}

.nav-item a{
    font-size: large;
    font-weight: 600;
    color:var(--text-main-link);
}




.input-group-text{
    background: var(--bg-main-btn-sub);
	border:1px solid var(--border-main-btn-sub);
    color: var(--text-main-btn-sub);
    padding: 10px;
}


.content_box {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-basic-sub);
    border: 1px solid var(--border-basic-sub);
    color: var(--text-basic-sub);
    padding: 30px;
}

.card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border-radius: 8px;
    cursor: pointer;
    background: var(--bg-main-sub);
    border: 1px solid var(--border-main-sub);
    color: var(--text-main-sub);
    padding: 0px;
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.card a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    }



.card-header {
    background: var(--bg-card-header);
	border:1px solid var(--border-card-header);
    color: var(--text-card-header);
    font-weight: bold;
    font-size: 1.2rem;
}

.card-header a{
    color: var(--text-card-header-link);
}

.card-body {
    background: var(--bg-card-body);
	border:1px solid var(--border-card-body);
    color: var(--text-card-body);
    padding:20px  40px;
    font-size: medium;
    border-radius: 5px;;
}

.card-body a{
    color: var(--text--card-body-link) !important;
	text-decoration:none !important;
    font-weight: 700;
}


.card-side {
	border:1px solid var(--border-card-side);
    color: var(--text-card-side);
    padding:20px 30px;
    font-size: medium;
    border-radius: 5px;
	box-shadow: 0 4px 5px rgba(196, 196, 194,0.1);
	
}

.card-side a{
    color: var(--text--card-side-link) !important;
	text-decoration:none !important;
    font-weight: 700;
}

.card-body-sub {
    background: var(--bg-card-body-sub);
	border:1px solid var(--border-card-body-sub);
    color: var(--text-card-body-sub);
    padding:20px  40px;
    font-size: medium;
}

.card-body-sub a{
    color: var(--text--card-body-sub-link) !important;
	text-decoration:none !important;
    font-weight: 700;
}

@media (max-width: 760px){
	.card-body-sub {
    background: var(--bg-basic);
	border:0px solid var(--border-basic);
    color: var(--text-basic);
    padding:20px  0px;
}
}


@media (max-width: 760px){
	.card-body {
        background: var(--bg-basic);
        border:1px solid var(--border-basic);
        color: var(--text-basic);
        padding:20px;    
    }
    
}

.mini_thumb{
        width: 100px; height: 100px; object-fit: cover; border: 1px solid  var(--border-basic); border-radius: 4px;
    
}

@media (max-width: 760px){
	.mini_thumb{
        width: 50px; height: 50px; 
    
}
    
}
.detail-body {
    background: var(--bg-sub);
	border:1px solid var(--border-sub);
    color: var(--text-sub);
    padding: 40px;
    font-size: medium;
}

.detail-body a{
    color: var(--text-sub-link);
	text-decoration:none !important;
    font-weight: 700;
}

.content_title{
	border-top:0px solid var(--border-content-title);
	border-bottom:1px solid var(--border-content-title);
	border-left:0px solid var(--border-content-title);
	border-right:0px solid var(--border-content-title);
    color: var(--text-content-title);
    font-size: 1.2rem;
    font-weight:bold;
    padding:10px 0px;
    margin:0px 0 30px 0;
	 
}
.content_title a{
	color: var(--text-content-title-link);
}


@media (max-width: 578px) {
   .content_title{
    margin:20px 0
}
   
}

.no_content{
    background: var(--bg-basic-sub);
    border: var(--border-basic-sub);
    color: var(--text-basic-sub);
    padding: 20px 0;
    text-align: center;
}


.img_area{
	border:1px solid var(--border-basic-sub);
    background: var(--bg-basic-sub) !important;
    height:300px;
   border-radius:0px;
   overflow: hidden;
}

.img_area a{
	
    color: var(--text-basic-sub-link) !important;
   
}


.img_area img{
    width:100%;
    height:300px;
    border-radius: 0px;
    object-fit: cover;
}


@media (max-width: 578px) {
    .img_area{
    height:100%;
   
}
	
    .img_area img{
    width:100%;
    height:100%;
}
    
}

.webzine_img_area{
	border:0px solid var(--border-basic-sub);
    background: var(--bg-basic-sub) !important;
   
}

.webzine_img_area a{
	
    color: var(--text-basic-sub-link) !important;
   
}


.webzine_img_area img{
    width:100%;
    height:100%;
     object-fit: cover;
}


@media (max-width: 768px) {
    .webzine_img_area{
    height:100%;
   
}
	
    .webzine_img_area img{
    width:100%;
    height:100%;
}
    
}


.media_title{
font-weight:bold;
font-size:1.1rem;
}

.mf_title{
font-size:1.0rem;
}

.tag_name{
	display:inline-block;
	background: var(--bg-tag);
	border:1px solid var(--border-tag);
    color: var(--text-tag);
	font-size:0.7rem;
	border-radius:3px;
	padding:3px 5px;
}

.tag_name a{
    color: var(--text-tag-link);
}

.content_area{
    background: var(--bg-content);
	border:1px solid var(--border-content);
    color: var(--text-content);
    padding:30px;
    min-height:250px;
}

.content_area a{
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-content-link);
}

.content_box{
    background: var(--bg-content);
	border:1px solid var(--border-content);
    color: var(--text-content);
    padding:10px;
}

.content_box a{
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-content-link);
}
.mf_fct{
	background: var(--bg-basic);
	border:1px solid var(--border-basic);
    color: var(--text-basic);
	padding:0 10px;
	font-size:0.8rem;
	border-radius:5px;
}

.icon_box{
    background: var(--bg-basic-sub);
	border:1px solid var(--border-basic-sub);
    color: var(--text-basic-sub);
    padding:10px;
	height: 250px; 
	display: flex; 
	align-items: center; 
	justify-content: center;
	text-align:center;
	padding:30px 0;
}

.icon_box a{
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-basic-sub-link);
}


.file_view_left{
    padding:30px;
    background:var(--bg-content);
    color: var(--text-content);
	border:1px solid var(--border-content);
	
}

.file_view_left{
    color: var(--text-content-link);
}


.file_view_left_content{
    min-height: 600px;
    padding: 0px;
}


@media (max-width: 576px) {
	.file_view_left{
        padding:10px;
	
}
    
}

.thumbnail-card {
	
    width:100px;
    height:100px;
}

.thumbnail-card:hover {
	border-color: #ddd;
}

.thumbnail-card.active {
border-color: #0d6efd;
}

.thumbnail-content {
	width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-basic);
    border: 1px solid var(--border-basic);
}

.thumbnail-img {
	width:100%; 
    height: 250px; 
    object-fit: cover;
    border-top-left-radius: 10px; /* Adjust the radius as needed */
    border-top-right-radius: 10px; /* Adjust the radius as needed */
}

@media (max-width: 576px) {
	.thumbnail-img {
        width:100%; 
		height: 100% !important; 
	}
    
}

.thumbnail-icon {
	display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #6c757d;
    font-size: 20px;
}
.icon_class{
     margin-right: 12px;
     border-radius: 5px;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%; 
     height: 250px;
}


@media (max-width: 768px) {
	.icon_class{
        margin: 10px;
        height: 300px;
}
    
}

/* FontAwesome 대체 */
.fa-file::after { content: "📄"; }
.fa-file-video::after { content: "🎬"; }
.fa-file-audio::after { content: "🎵"; }
.fa-file-pdf::after { content: "📕"; }
.fa-file-word::after { content: "📘"; }
.fa-file-excel::after { content: "📗"; }
.fa-file-powerpoint::after { content: "📙"; }
.fa-file-alt::after { content: "📝"; }
.fa-file-archive::after { content: "🗜️"; }
.fa-image::after { content: "🖼️"; }

/* 작은 화면에서 아이콘 크기 조정 */
@media (max-width: 576px) {
	.thumbnail-icon {
		font-size: 16px;
	}
    .thumbnail-card {
	width:50px;
    height:50px;
}

}

.file_view_right{
    padding:0px;

}

@media (max-width: 760px){
	.file_view_right{
    background: var(--bg-basic);
    color: var(--text-basic);
    padding:0px;

}
}

/* 카드 내부 이미지도 모바일에서 반응형으로 설정 */
.card img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover;
}




.navbar a {
    color: var(--text-main-link);
    margin-right: 15px;
    text-decoration: none;
    font-weight: bold;
}

.navbar a:hover {
    text-decoration: none;
	color:rgb(247, 247, 202);
}

a:hover {
    text-decoration: underline;
}

.navbar .active {
    color: #28a745;
}

.mp_portal_footer{
    background:var(--bg-dark);
    color:var(--text-dark);
    text-align: center;
    padding:20px 0;
    font-size: medium;
}


.mp_portal_footer a{
    color:var(--text-dark-link);
}

@media (max-width: 760px){
	.content_area{	
        padding: 10px;
        margin:0 0 20px 0;
        min-height:100px;
		}
    
}


.youtube-thumbnail-link {
	position: relative;display: inline-block;cursor: pointer;
}
.youtube-play-button {
	position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 68px;height: 48px;
	background: url('https://www.youtube.com/s/desktop/d743f78f/img/sprite_play_button.png') no-repeat;background-size: cover;
}
.youtube-thumbnail-link:hover .youtube-play-button {
	background-image: url('https://www.youtube.com/s/desktop/d743f78f/img/sprite_play_button_hover.png');
}

/* Floating YouTube Player Styles */
.youtube-floating-player {
	position: fixed;bottom: 20px;right: 20px;width: 400px;height: 250px;z-index: 9999;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);border-radius: 8px;
	overflow: hidden;background-color: #000;resize: both;min-width: 300px;min-height: 200px;max-width: 800px;max-height: 600px;
}

.youtube-floating-player.minimized {
	height: 40px !important;
}

.youtube-floating-player.minimized .youtube-floating-content {
	display: none;
}

.youtube-floating-container {
	width: 100%;height: 100%;display: flex;flex-direction: column;
}

.youtube-floating-header {
	background: linear-gradient(135deg, #ff0000, #cc0000);color: white;padding: 8px 12px;display: flex;justify-content: space-between;align-items: center;cursor: move;
user-select: none;
	font-size: 12px;font-weight: bold;
}

.youtube-drag-handle {
	flex-grow: 1;cursor: move;
}

.youtube-controls {
	display: flex;gap: 5px;
}

.youtube-minimize-btn,
.youtube-resize-btn,
.youtube-close-btn {
	background: rgba(255, 255, 255, 0.2);border: none;color: white;width: 20px;height: 20px;border-radius: 3px;
	cursor: pointer;font-size: 12px;display: flex;align-items: center;justify-content: center;transition: background-color 0.3s;
}

.youtube-minimize-btn:hover,
.youtube-resize-btn:hover,
.youtube-close-btn:hover {
	background: rgba(255, 255, 255, 0.3);
}

.youtube-floating-content {
	flex: 1;background-color: #000;
}

/* 다양한 크기 클래스 */
.youtube-floating-player.size-small {
	width: 300px;height: 200px;
}

.youtube-floating-player.size-medium {
	width: 400px;height: 250px;
}

.youtube-floating-player.size-large {
	width: 600px;height: 380px;
}

@media (max-width: 768px) {
	.youtube-floating-player {
		width: 280px;height: 180px;bottom: 10px;right: 10px;
	}
}

.dropdown-menu{
background:var(--bg-main);
}

.dropdown-menu a:hover{
background:var(--bg-main-sub);
}

.right_column{
padding:0 0 0 30px !important;
}

@media (max-width: 768px) {
	.right_column{
padding:20px !important;
}
}

.content_left{
padding:0px;
}

.content_right{
padding:0 0 0 50px;

}
@media (max-width: 1300px) {
	
	.content_right{
		padding:0 0px 0 20px;
	}
}

@media (max-width: 990px) {
	.content_left{
		padding:0px 10px;
	}
	.content_right{
		padding:0 10px;
	}
}

.file_info{
    background:var(--bg-content);
    height:100%;
    color:var(--text-content);
    padding:20px;
}


.file_info a{
    color:var(--text-content-link);
}

.general_file_info{
    background:var(--bg-sub) !important;
    border:1px solid var(--border-sub);
    color:var(--text-sub);
    padding:20px;
    border-radius: 10px;
    margin:20px 0;
}

.general_file_info a{
    color:var(--text-sub-link);
}





.star-rating {
	position: relative;
	display: inline-block;
	font-size: 1.5rem;
}
.star-rating-fill {
	color: #f5c542; /* 채워진 별 색상 */
	position: absolute;
	top: 0;
	left: 0;
	white-space: nowrap;
	overflow: hidden;
}
.star-rating-base {
	color: #ddd; /* 빈 별 색상 */
	white-space: nowrap;
}
.star-rating span {
	letter-spacing: -1px;
}