/**
 * 파일 위치: _theme/{{theme}}/assets/css/theme.css
 * 역할: page-loading 스타일 및 fadeout 애니메이션
 */


.badge-xs{padding: 2px 5px;line-height: normal;font-size: 12px;border-radius: 3px;}

/* 유틸리티 클래스 */
.text-primary-custom {color: #667eea !important;}
.bg-primary-custom {background-color: #667eea !important;}
.border-primary-custom {border-color: #667eea !important;}

/* 애니메이션 */
@keyframes fadeIn {
	from {opacity: 0;transform: translateY(10px);}
	to {opacity: 1;transform: translateY(0);}
}

.fade-in {animation: fadeIn 0.3s ease-in-out;}

/* 버튼 스타일 */
.btn-primary {background-color: #667eea;border-color: #667eea;}
.btn-primary:hover {background-color: #5568d3;border-color: #5568d3;}
.btn-secondary {background-color: #6c757d;border-color: #6c757d;}
.btn-secondary:hover {background-color: #5a6268;border-color: #545b62;}

.badge-sm{padding: 3px 5px; font-size: 12px; border-radius: 3px;}


/* 기본 */
body {font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;min-height: 100vh;display: flex;flex-direction: column;}

/* 페이지 로딩 스피너 */
.page-loading {display: flex;align-items: center;justify-content: center;background: #eee;z-index: 9999;position: fixed;width: 100%;height: 100vh;flex-direction: column;top: 0;left: 0;opacity: 1;transition: opacity 0.5s ease-out;pointer-events: all;}
.page-loading.fade-out {opacity: 0;pointer-events: none;}

/* Header 스타일 */
header {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; width: 100%; z-index: 5; border-bottom: 1px solid rgba(221, 221, 221, 0.4); }
header.fixed {position: fixed; background: #fff; }
header.fixed .navbar-nav{}
header.fixed .navbar-nav li .nav-link{color:#333!important;}
header .link-list ul li a{color:#fff; font-size: 13px;text-decoration: auto;line-height: 22px;display: inline-block;}
header .link-list ul li{ text-align: center}
header.fixed .link-list ul li a{color: #333 !important;font-size: 13px;text-decoration: auto;line-height: 22px;display: inline-block;}


header.fixed .logo-container .navbar-brand{color:#333!important;}


header .logo-container img.logo-white{filter: brightness(0) invert(1);}
header.fixed .logo-container img{filter: brightness(1) invert(0);}

.navbar{display: flex;align-items: center;justify-content: space-between;width: 100%;height: 80px;}

.logo-container {display: flex;align-items: center; padding: 0 20px;}
.logo-container img {max-height: 50px;max-width: 150px;object-fit: contain; margin-right: 12px}
.logo-container .navbar-brand {font-weight: 700;font-size: 2rem;color: white !important; margin: 0}
header .navbar-toggler{border: 0; font-size: 50px; color:#fff}
header .navbar-toggler:focus {border: 0; box-shadow: none}
header.fixed .navbar-toggler{color:#333}
header.fixed .navbar-toggler:focus{box-shadow: none;}
.nav-link {color: rgba(255, 255, 255, 0.9) !important;font-weight: 500;transition: color 0.3s;padding: 0.5rem 1rem !important;font-size: 22px;}
.nav-link:hover {color: white !important;}
.dropdown-menu {border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);border: none;}
.dropdown-item {padding: 0.5rem 1rem;transition: background-color 0.2s;}
.dropdown-item:hover {background-color: #f8f9fa;}
.link-list ul {display: flex; margin: 0; padding: 0; padding: 0 20px}
.link-list ul li{list-style: none; margin: 0 10px; padding: 0; font-size: 20px;color: #fff;}
.link-list ul li a img{width: 35px;height: 35px;border-radius: 15%;}




@media (max-width: 992px) {


	.navbar-top{}
	.navbar-top ul{padding: 0;display: flex;justify-content: space-around;}
	.navbar-top ul li{list-style: none; font-size: 14px; text-align: center; position: relative; width: 62px;}
	.navbar-top ul li::after{content: '';display: inline-block;height: 54px;border: 1px solid #666;position: absolute;top: 8px;right: -33%;}
	.navbar-top ul li:last-child::after{display: none}
	.navbar-top ul li a{color: #fff;text-decoration: none;height: 100%;display: inline-block; }
	.navbar-top ul li a i{font-size: 30px}

	.accordion{padding: 10px;margin: 0;}

	.accordion .accordion-item{background: #343a40;}
	.accordion .accordion-item .accordion-header{border-bottom: 1px solid #212529;}
	.accordion .accordion-item .accordion-header button{background: transparent; font-size: 18px; box-shadow: none; border: 0; width: 100%; text-align: left;}
	.accordion .accordion-item .accordion-header button.accordion-button:focus{outline: none; box-shadow: none}
	.accordion .accordion-item .accordion-header button.accordion-button::after{background-image: none; content: '\F282'; font-family: 'bootstrap-icons'; color:#fff;}
	.accordion .accordion-item .accordion-body{}
	.accordion .accordion-item .accordion-body ul li{position:relative}
	.accordion .accordion-item .accordion-body ul li a.nav-link{font-size: 18px}
	.accordion .accordion-item .accordion-body ul li::marker{content: '';}
	.accordion .accordion-item .accordion-body ul li::before{content: '-'; position: absolute; top: 10px; left: 0; color: #fff}

}



/* Main 스타일 */
main {flex: 1;padding:0;background: #f8f9fa; position: relative;}
.spinner-border {width: 3rem;height: 3rem;}
.slide-item .cover-slide-img{width: 100%;}
.slide-item .cover-overlay{position: absolute;top: 0;left: 0;width: 100%; background: #000; opacity: 0.5; z-index: 1}
.slide-item .cover-text{width: 100%;display: flex;justify-content: center;align-items: center;  position: relative; z-index: 2; flex-direction: column; padding: 0 10%}
.slide-item .cover-text .card-title{font-size: 100px;color: #fff;font-weight: 800;letter-spacing: -5px; margin-bottom: 20px; text-align: center;word-break: keep-all; opacity: 0.7; }
.slide-item .cover-text .card-text{font-size: 50px; color: #fff; font-weight: 600;letter-spacing: -2px; text-align: center;word-break: keep-all;}
.slick-dots{bottom: 30px;}
.slick-dots li{margin: 0}
.slick-dots li button:before{font-size: 14px;color: #ccc; opacity: 0.7;}
.slick-dots li.slick-active button:before{color: #ffaf00}
.slick-prev, .slick-next {z-index: 2; width: 50px;}
.slick-prev {left: 25px;}
.slick-next {right: 25px;}
.slick-prev i, .slick-next i{font-size: 50px;color: #fff;}
.slick-prev:before, .slick-next:before{content:''}


.wani-link-list-block{padding: 100px 0; background: #efefef;}
.wani-link-list-block h4{font-size: 30px; font-weight: bold}
.wani-link-list-block h6{font-size: 20px;}
.wani-link-list-block .box-list{display: grid;grid-template-columns: repeat(6, minmax(0, 1fr));gap: 24px 16px;}
.wani-link-list-block .box-list a{display: flex;flex-direction: column;align-items: center;}
.wani-link-list-block .box-list .box{display: flex;width: 100%;max-width: 96px;height: 80px;box-shadow: 0 0 9px 0 #ddd;border-radius: 15px;align-items: center;justify-content: center;background: #fff;}

@media (max-width: 767.98px) {
	.wani-link-list-block .box-list{grid-template-columns: repeat(3, minmax(0, 1fr));gap: 20px 12px;}
}




/*유튜브슬라이더*/
.wani-youtube-slide-block{padding: 100px 0; background: #fff;}
.wani-youtube-slide-block h4{font-size: 30px; font-weight: bold}
.wani-youtube-slide-block h6{font-size: 20px;}
.youtube-slide-container {position: relative;}
.youtube-slide-item {padding: 0 10px;}
.youtube-slide-link {display: block;text-decoration: none;color: inherit;}
.youtube-thumbnail-wrapper {position: relative;width: 100%;padding-top: 56.25%;overflow: hidden;}
.youtube-thumbnail {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.youtube-slide-item:hover .youtube-thumbnail {transform: scale(1.05);}
.youtube-play-overlay {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 64px;color: rgba(255, 0, 0, 0.5);transition: all 0.3s ease;pointer-events: none;}
.youtube-slide-item:hover .youtube-play-overlay {color: #ff0000;font-size: 72px;}
.youtube-slide-info {padding: 12px 0;}
.youtube-board-name {margin-bottom: 4px;padding-top: 5px;font-size: 14px;}
.youtube-post-title {font-weight: 500;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.youtube-slide-container .slick-dots{bottom:-30px}

/* 반응형 */
@media (max-width: 992px) {
	.youtube-slide-container .slick-prev {left: 10px;}
	.youtube-slide-container .slick-next {right: 10px;}
	.youtube-play-overlay {font-size: 48px;}
	.youtube-slide-item:hover .youtube-play-overlay {font-size: 56px;}
}


/*이미지슬라이더*/
.wani-image-slide-block{padding: 100px 0; background: #fff;}
.wani-image-slide-block h4{font-size: 30px; font-weight: bold}
.wani-image-slide-block h6{font-size: 20px;}
.image-slide-container {position: relative;}
.image-slide-item {padding: 0 10px;}
.image-slide-link {display: block;text-decoration: none;color: inherit;}
.image-thumbnail-wrapper {position: relative;width: 100%;padding-top: 56.25%;overflow: hidden;}
.image-thumbnail {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.image-slide-item:hover .image-thumbnail {transform: scale(1.05);}
.image-play-overlay {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 64px;color: rgba(255, 0, 0, 0.5);transition: all 0.3s ease;pointer-events: none;}

.image-slide-info {padding: 12px 0;}
.image-board-name {margin-bottom: 4px;padding-top: 5px;font-size: 14px;}
.image-post-title {font-weight: 500;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.image-slide-container .slick-dots{bottom:-30px}




/*소개링크*/
.wani-intro-link-block{padding: 100px 0; background: #efefef;}
.wani-intro-link-block h4{font-size: 30px; font-weight: bold}
.wani-intro-link-block h6{font-size: 20px;}
.wani-intro-link-block .overlay{height: 100%;display: flex;align-items: center;justify-content: center;}
.wani-intro-link-block .img-title{letter-spacing: 7px}
.wani-intro-link-block .slick-dots{bottom:-50px}



.wani-intro-link-slider:not(.slick-initialized){display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}
.wani-intro-link-slider{margin-left: -12px; margin-right: -12px;}
.wani-intro-link-slide-item{padding: 0 12px;}
.wani-intro-link-slider .slick-track{display: flex;}
.wani-intro-link-slider .slick-slide{height: inherit;}
.wani-intro-link-slider .slick-slide > div{height: 100%;}
.wani-intro-link-slider .card{height: 100%;}
.wani-intro-link-slider .btn-group,
.wani-intro-link-slider .btn-group-vertical{gap: 0;}
.wani-intro-link-slider .btn-group .btn,
.wani-intro-link-slider .btn-group-vertical .btn{white-space: normal;}

@media (max-width: 767.98px) {
	.wani-intro-link-slider:not(.slick-initialized){grid-template-columns: 1fr;}
}


.wani-link-list-bg-block{}
.wani-link-list-bg-block .bg-wrapper{padding: 100px 0; position: relative;}
.wani-link-list-bg-block h4{font-size: 30px; font-weight: bold; color: #fff}
.wani-link-list-bg-block h6{font-size: 20px; color: #fff}
.wani-link-list-bg-block .overlay{position: absolute;width: 100%;height: 100%;background: #000;top: 0;opacity: 0.5;}
.wani-link-list-bg-block .container{z-index: 3;position: relative;}
.wani-link-list-bg-block .button-list {width: 100%; display: flex; column-gap: 20px;}
.wani-link-list-bg-block .button-list a{background: #fff5;border-radius: 0;border: 1px solid #fff;color: #fff; justify-content: space-between; display: flex}


@media (max-width: 992px) {
	.wani-link-list-bg-block .button-list{flex-direction: column;}
	.wani-link-list-bg-block .button-list a{margin-top: 15px}
}


/*협력기관*/

.wani-partner-list-block {padding: 100px 0; background: #fff;}
.wani-partner-list-block h4{margin: 0; white-space: pre}
.wani-partner-list-block .box-list{width: 100%;align-items: center; display: grid;grid-template-columns: repeat(6, 1fr);gap: 0.5rem; }
.wani-partner-list-block .box-list a{}

@media (max-width: 992px) {
	.wani-partner-list-block .box-list{grid-template-columns: repeat(2, 1fr)}
}

/*좌우게시판*/
.wani-latest-list-section{padding: 100px 0; background: #efefef;}
.wani-latest-list-section .board-header {display: flex; justify-content: space-between; align-items: center;}
.wani-latest-list-section .board-body .list-group li{display: flex; justify-content: space-between; align-items: center;}
.wani-latest-list-section .board-body .list-group li a{font-weight: 500}

/* 게시판 스타일 */
.board-container {padding: 2rem; padding-top: 80px}
.breadcrumb{padding-bottom: 40px; justify-content: center}
.breadcrumb li{font-size: 13px; color: #000!important; font-weight: 700}
.breadcrumb li a{color: #666;text-decoration: none;font-weight: 500;}
.breadcrumb-item+.breadcrumb-item::before{content: '\F285'; font-family: 'bootstrap-icons'}
.board-container h4 {color: #000;font-weight: 500; font-size: 40px; text-align: center}
.board-container .card-body img{width: 100%}

/* 서브페이지 */
.page-container.sub{padding: 2rem;padding-top: 80px; margin-top: 60px;}
.page-container.sub .page-header h4{color: #000;font-weight: 500; font-size: 40px; text-align: center}
.page-container.sub .page-body{padding: 30px; border-radius: 3px; background:#fff;}
.page-container.sub .page-body figure{text-align: center}

.table {}
.table thead {background-color: #f8f9fa;}
.table thead th {border-bottom: 2px solid #dee2e6;color: #495057;font-weight: 600;padding: 1rem;}
.table tbody tr {transition: background-color 0.2s;}
.table tbody tr:hover {background-color: #f8f9fa;}
.table tbody td {padding: 1rem;vertical-align: middle;}

/* 게시글 상세 스타일 */
.board-detail {background: white;padding: 2rem;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);}
.board-detail h4 {color: #333;font-weight: 700;margin-bottom: 1rem;}
.board-content {line-height: 1.8;color: #333;min-height: 200px; background: #fff}

/* 페이지네이션 스타일 */
.pagination {margin-top: 2rem;}
.page-link {color: #667eea;border: 1px solid #dee2e6;padding: 0.5rem 0.75rem;transition: all 0.2s;}
.page-link:hover {background-color: #667eea;color: white;border-color: #667eea;}
.page-item.active .page-link {background-color: #667eea;border-color: #667eea;}

/* Footer 스타일 */
footer {background: #343a40;color: white;padding: 2rem 0;margin-top: auto;}
footer h5 {font-weight: 700;margin-bottom: 1rem;}
footer a {color: rgba(255, 255, 255, 0.8);text-decoration: none;transition: color 0.2s;}
footer a:hover {color: white;}
footer .footer-logo{display: flex;align-items: center;gap: 14px;}
footer .footer-logo h5{font-size: 26px; margin: 0}
footer .footer-logo img{filter: brightness(0) invert(1);}

/* 반응형 디자인 */
@media (max-width: 992px) {

	.board-container, .board-detail {padding: 1rem; padding-top: 80px;}
	.page-container.sub{padding: 1rem;padding-top: 80px;}
	.page-container.sub .page-body{padding: 0;}
	.slide-item .cover-text .card-title{font-size: 60px}
	.slide-item .cover-text .card-text{font-size: 40px}

	.table {font-size: 0.9rem;}
	.table thead th, .table tbody td {padding: 0.5rem;}
	.slick-prev, .slick-next {display: none!important;}



}


/*드롭존*/
.dropzone{display: flex;align-items: center;justify-content: center;}
.dropzone .dz-message{margin: 0; padding: 0}



/*게시판*/
h6.card-title{display: flex; align-items: center;}
.board-search-wrap{width: 300px}
@media (max-width: 576px) {
	.board-search-wrap{width: 150px}
}