/***************************************************
 * Fal.ai 를 이용한 AI들에서 사용하는 스타일
 ***************************************************/

.tooltip {
  font-size: 12px !important;
}

.tooltip div {
	display:block;
	background-color:#ccc;
	color:#000;
	border-radius:5px;
}

.tooltip .title {
	font-weight:800;
	background-color:#fff;
	margin-bottom:5px;
}

/***************************************************
 * 타이틀 섹션
 ***************************************************/
#ai_section {
	padding-top: 65px;
}

@media (max-width: 767px) {
	#ai_section {
		padding-top: 0px;
	}

   header {
        margin-bottom: 50px;
    }
}

#ai_section h4 {
	font-weight:800;
}

#ai_section h4 span {
	font-weight:400;
}

#ai_section .full {
	background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    /* border-bottom: 1px solid #ddd; */
    padding: 20px 0px 0px 0px;
    margin-bottom: 20px;
}

#ai_search .input-group {
	max-width:250px;
}

#ai_search .btn {
	border:1px solid #e4e4e4;
}

/***************************************************
 * 레인지 입력 부분 설정
 ***************************************************/
.form-range-wrapper input[type="range"] {
	border:0px;
	padding:0px;
}
.form-range-wrapper input[type="number"] {
    height: 26px;
    border-radius: 0;
    background-color: #f5f5f5;
}


/***************************************************
 * 이미지 생성 영역
 ***************************************************/
 #result-container {
	border:1px solid #ccc;
	padding:10px;
}

#result-container i.fa-cog {font-size:130px;color:#ccc;}
#result-container .text-waiting {margin-top:20px;}
#result-container img {display:block;margin-bottom:20px;}


#result_notice .d-flex {
	min-height:400px;
}

@media (max-width: 767px) {
	#result_notice .d-flex {
		min-height:200px;
	}
}

/***************************************************
 * 생성된 이미지에 툴바 넣기 위해
 ***************************************************/
.image_wrapper {
	position:relative;
	margin-bottom:10px;
}

.image_wrapper .toolbar {
	position:absolute;
	top:10px;
	right:10px;
}

.image_wrapper .toolbar a {
    display: inline-block;
    margin-left: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #eee;
    /* background-color: #f6f6f6; */
    /* opacity: 0.7; */
    padding: 5px 8px;
}

.image_wrapper .toolbar a:hover {
    color: #333;
    background-color: #f6f6f6;
}

/***************************************************
 * 생성할 때 빙빙 돌게 만들기 위해서
 ***************************************************/
.spinner {
  animation: spin 1s linear infinite; /* 회전 애니메이션 */
}
@keyframes spin {
  from {
	transform: rotate(0deg);
  }
  to {
	transform: rotate(360deg);
  }
}


/***************************************************
 * 목록
 ***************************************************/
#ai_models .card {
	min-height:200px;
}


.model-title span {
	display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 15px;
    text-align: center;
    line-height: 20px;
    color: #fff;
    margin-left: 3px;
}

#ai_section .gallery_wrapper {
	height: 210px;
    border-radius: 10px;
	background-position: center center;
	position:relative;
	border:1px solid #eee;
}

#ai_list .gallery_wrapper .tags {
	position:absolute;
	top:5px;
	left:5px;
	opacity:0.8;
}

#ai_list .gallery_wrapper .tags .badge {
	font-weight:300;
	margin-right:5px;
}

@media (max-width: 768px) { /* 너비 768px 이하일 때 적용 */
    .flex-column-mobile {
        flex-direction: column;
        gap: 10px; /* 세로 간격 추가 */
    }

	#ai_section .gallery_wrapper {
		height:120px;
	}
}


#ai_section .nav-item .nav-link {
    color: #6c757d; /* 기본적으로 text-dark */
}
#ai_section .nav-item.active .nav-link {
    color: #0d6efd !important; /* text-primary */
}

#ai_section .nav-pills .nav-item.active, .nav-pills .show>.nav-link {
    background-color: #fafafa !important
}
#ai_section .nav-item.active .nav-link {
    color: #0d6efd !important;
}