@charset "utf-8";


/* 아이콘  */
i.fas {
	margin-left: .5em;
}

/* 더보기 버튼 */
.more {
	background-color: var(--bs-primary);
	width: fit-content;
	display: flex;
	gap: 1rem;
	padding: 1rem;
	border-radius: 100px;
	cursor: pointer;
	align-items: center;
	height: 2.5rem;
}

.more.dark {
	background-color: var(--bs-gray-800);
	border: 1px solid var(--bs-gray-500);
}

.more * {
	color: #fff;
}

.more img {
	height: 200%;
	transition: all .3s ease-out;
}

.more:hover img {
	transform: rotate(360deg);
}

/* 모달 */
.modal-body  * {
	font-family:'Pretendard Variable';
}
/* 테이블 */
.table-wrapper {
	overflow: hidden;
	border: 1px solid var(--bs-gray-500);
	border-radius: 9px;
	width: auto;
}

.table * {
	text-align: center;
	font-size: 16px;
}

.table thead * {
	line-height: 400%;
	background-color: var(--bs-gray-100);
}

.table tbody tr td, .table tbody tr th {
	line-height: 350%;
}
.table tbody tr td {
	font-family: 'Pretendard Variable';
}
.table tr {
	cursor: pointer;
}
.table th, .table td {
    vertical-align: middle;
}


/* 파일 첨부 input */
.file-upload-wrapper,
.file-upload-wrapper input,
.file-upload-wrapper label {
	display: block;
	width: 100%;
}

.drop-area {
	border: 2px solid var(--order-page);
	border-radius: 6px;
	padding: 2rem;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s;
	background-color: #fff;
	border: 1px dashed var(--bs-gray-500);
}

.drop-area.dragover {
	background-color: #fff1c6;
}

.drop-area p {
	color: #888;
	font-size: 1.2rem;
	line-height: 1.6;
}

.preview-item {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	gap: 10px;
	justify-content: space-between;
	border: 1px solid #ddd;
	padding: 5px 10px;
	border-radius: 5px;
}


.preview-item span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
}

.remove-btn {
	background: none;
	border: none;
	color: #ff4d4d;
	font-size: 1rem;
	cursor: pointer;
	flex: 0 1 auto;
	white-space: nowrap;
}

/* 파일 유형 아이콘 */
.file-icon {
	width: 40px;
	height: auto;
	object-fit: contain;
}

.file-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-flex;
	/* 또는 inline-flex도 OK */
}


/* 검색창 */
.gradient-search-wrapper {
	padding: 2px;
	border-radius: 999px;
	/* pill shape */
	background: linear-gradient(90deg, #00e4d6, #0040ff);
	/* left to right */
	display: inline-flex;
	align-items: center;
	justify-content:center;
}
.modal .gradient-search-wrapper {
	width:100%;
}
.gradient-border {
	background-color: #fff;
	/* inner background */
	border-radius: 999px;
	padding: 2px;
	flex: 1 1 auto;
}
i.fa-search:before {
	font-size:inherit;
}
.custom-search {
	background-color: transparent;
	border: none;
	display: flex;
	align-items: center;
	flex-wrap:nowrap;
}
 @media ( max-width:768px) {
form:has(.custom-search),.gradient-search-wrapper, .custom-search {
	width:100%;
 }
 }

.custom-search .form-control {
	background-color: transparent;
	border: none;
	color: var(--bs-gray-700);
	padding-left: 12px;
}

.custom-search .form-control::placeholder {
	color: #ccc;
}

.custom-search .form-control:focus {
	outline: none;
	box-shadow: none;
}

.custom-search .btn-search {
	background: none;
	border: none;
	color: var(--bs-primary);
	padding-right: 12px;
	width:max-content;
}

.custom-search .btn-search:focus {
	outline: none;
	box-shadow: none;
}
/*  order table */
.table-title {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin-bottom: 50px;
}

.table-title .center-dash {
	flex: 1 0 auto;
	width: auto;
	height: 1px;
	background-color: var(--bs-gray-300);
	align-self: center;
	margin-left: 1rem;
	margin-right: 1rem;
}
.order-table tr:not(:last-child) {
	border-bottom: 1px solid var(--bs-gray-300);
}
.order-table th:nth-child(1),
.order-table td:nth-child(1) {
	min-width:100px;
}
.order-table th:nth-child(2),
.order-table td:nth-child(2) {
	max-width:250px !important;
	width:250px;
	text-overflow: ellipsis;
	overflow:hidden;
	white-space: nowrap;
}
table .sort-icon {
	color: var(--bs-gray-500);
	font-size: 1rem;
}
table .active, table .active .sort-icon {
	color: var(--bs-danger);
}


/* 테이블 거래상태 뱃지 스타일 */
.badge-status {
  display: inline-flex;
  padding: 0.35em 0.75em;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  align-self:center;
}

.badge-done       { background-color: #2C7D4C; }  /* 거래성사 */
.badge-nego { background-color: #3A3F78; }  /* 협상중 */
.badge-selling    { background-color: #004FFF; }  /* 판매중 */
.badge-waiting    { background-color: #D6D9E0; color: #000; }  /* 등록대기, 승인대기 */
.badge-rejected   { background-color: #C72F30; }  /* 거래중단, 승인거절 */
.badge-expired    { background-color: #C36F2F; }  /* 마감일 도과 */

/* 채권자 선택 모달 */

#searchCreditorModal .list-group {
	align-items:center;
}
#searchCreditorModal .list-group-item {
	display: flex;
	justify-content: space-between;
	align-items:center;
	height:50px;
	border-radius:0;
	width:100%;
}


#searchCreditorModal .list-group-item .img-container {
	width:100px;
	height:100%;
	display:flex;
	justify-content: center;
}
#searchCreditorModal .list-group-item .img-container  img {
	object-fit: contain;
	height:100%;
}

#searchCreditorModal .modal-body {
	display: flex;
	flex-direction: column;
}

#searchCreditorModal .list-wrapper {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

#searchCreditorModal .list-wrapper > .list-group-item {
	/* 검색 결과 헤드 부분 */
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	width:100%;
	background-color: var(--bs-gray-600);
	color:white;
	padding: .5rem 1rem;
}
#searchCreditorModal .list-wrapper .pagination {
	margin-top: auto;
}

@media(max-width: 768px) {
	#searchCreditorModal .list-group-item>*:nth-child(2) {
		width: 66.666666666%;
	}

	#searchCreditorModal .list-group-item>*:last-child {
		display: none;
	}
}


/* 로그아웃 시 로그인 모달 띄우기 */
.login-blocked {
  position: relative;
}

.login-block {
  position: absolute;
  top: 0;       /* 부모 기준으로 상단 0 */
  left: 0;      /* 왼쪽 0 */
  right: 0;     /* 오른쪽 0 */
  bottom: 0;    /* 하단 0 */
  z-index: 10;
  background-color: transparent;
}

/* 로딩 프로그레스 바 */
.loader {
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.8);
	left:0;
	top:0;
	z-index:2000;
	position:fixed;  display: flex;
  	align-items: center;
  	justify-content: center;
}
.loader > .loader_ring {
  width: 100px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--bs-primary);
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 1s infinite linear;
 padding:8px;
}
@keyframes l3 {to{transform: rotate(1turn)}}

.new-badge {
	
	font-family: 'Pretendard Variable';
	font-weight:500;
	font-size: 1rem;
	color: var(--bs-danger);
	font-weight: bolder;
}
/* <span class="badge new-badge">N</span> */


/* 테이블 필터 */

.filter-bar {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 16px;
	padding: 10px;
	background-color: #f8f9fa;
	border-radius: 6px;
	font-size: 14px;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: flex-end;
}

.filter-bar .input-group {
	display: flex;
	align-items: center;
	gap: 10px;
	width: fit-content;
}
@media (max-width: 768px) {
	.filter-bar .input-group{
		width: max-content ;
		display:flex;
		flex-direction: row;
		flex-wrap:nowrap;
	}
	
	.filter-bar .input-group:nth-child(1){width:100%;}
	.filter-bar label {
		white-space: nowrap;;
	}
	.filter-bar .input-group input[type="number"] {
		flex: 1 1 auto;
		width:auto;
	}
	.btn-filter {
			margin-left:auto;
	}
}
.input-group label {
	font-weight: bold;
}

.input-group input[type="number"] {
	width: 240px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.input-group select {
	width: 80px;
	padding: 6px;
	border: 1px solid #ccc;
	border-radius: 4px !important;
}

.tilde {
	font-size: 16px;
	margin: 0 2px;
}

.filter-bar .btn-filter {
	padding: 6px 12px;
	background-color: var(--bs-gray-700);
	border: none;
	color: white;
	border-radius: 4px;
	cursor: pointer;
}

.btn-filter:hover {
	opacity: .8;
}

/* 일괄 매입 채권 카드 */

.event-card {
	margin-top: calc(30px);
	border: 1px solid var(--bs-gray-500);
	transition: all .3s ease-out; 
	width:auto;
	flex: 1  1 400px;
	height: 400px;
	display:flex;
	flex-direction: column;
	align-items: stretch;
	aspect-ratio: 2 / 3;
	background-color: var(--bs-card-bg) !important;;
} 
.event-card:hover {
	box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.5);
}
 .event-card > * {
	padding-left:1rem;
	padding-right:1rem;
}
.card-img-wrapper {
	height:200px;
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
}
.event-card .card-img-top {
	filter: grayscale(100%) ;
	width:auto;
	margin:auto;
	width:200px;
}
.event-card:hover .card-img-top {
    filter: grayscale(0%) sepia(100%) hue-rotate(180deg);
}

 .event-card .card-body {
	justify-content:space-evenly;
	display: flex;
	flex-direction: column;
	align-items:center;
}


/* 프로그래스 바 */

 .progress-bg {
  /* background-color: var(--bs-light); */
  height:auto;
  flex:1 0 auto;
  width:100%;
  margin: auto 0;
}

 .progress-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height:100%;
  align-items:center;
}
 .progress {
  width: 80%;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 100px;
  position:relative;
}

@media(max-width:768px){
	.progress {
		height: 1rem;
	}
}
.progress .progress-text{
	position:absolute;
	font-size: 1rem;
	left:50%;
	top:50%;
	transform: translate(-50%,-50%);
	color:#fff;
	mix-blend-mode: hard-light;
	
	font-family: 'Pretendard Variable';
	font-weight:500;
	z-index:1;
	text-shadow: 0 0 10px #000;
}
.progress .progress-bar {
  background: #7096ff;
  background: linear-gradient(
    275deg,
    var(--bs-primary) 0%,
    rgba(6, 10, 18, 1) 100%
  );
  transition: width 1s ease-out;
  font-size:1rem;
}


/* 비딩 리스트 테이블 */
#id__table_bids th,
#id__table_bids td {
	text-align: left !important;
	padding-left: 1rem;
	padding-right: 1rem;
}
.table-wrapper:has(#id__table_bids) {
	border: none;
}

#id__table_bids {
	border-collapse: separate;
	/* 중요! */
	border-spacing: 0 10px;
	/* 행 사이 간격: 수직 방향 10px */
}

#id__table_bids thead {
	border-radius: 9px;
	overflow: hidden;
}

#id__table_bids thead tr {
	border: 0;
	background-color: var(--bs-gray-200);
}

#id__table_bids thead tr th {
	line-height: 3;
	color: var(--bs-gray-700);
}

#id__table_bids thead th:first-child {
	border-top-left-radius: 9px;
	;
	border-bottom-left-radius: 9px;
	overflow: hidden;
}

#id__table_bids thead th:last-child {
	border-top-right-radius: 9px;
	;
	border-bottom-right-radius: 9px;
	overflow: hidden;
}

#id__table_bids th:last-child,
#id__table_bids td:last-child {
	width: max-content;
}

@media (max-width: 1200px) {
	#id__table_bids thead {
		display:none;
	}
	#id__table_bids .btn,
	#id__table_bids .badge {
		font-size:1rem !important;
	}
	#id__table_bids tbody {
		border-top: 1px solid var(--bs-border-color);
	}
	#id__table_bids tbody tr{
		display:flex;
		flex-wrap:wrap;
		border-bottom: 1px solid var(--bs-border-color);
		border-left: 1px solid var(--bs-border-color);
		border-right: 1px solid var(--bs-border-color);
		justify-content:left;
		padding-bottom:1rem;
		padding-top:1rem;
	}
	#id__table_bids tbody td {
		line-height: 300%;
		font-size:1rem;
		display:flex;
		align-items: center;

		/* order:0; */
	}
	.order-table thead {
		display: none;
	}

	.table-wrapper:has(.order-table),
	.order-table {
		border: none;
		overflow-x: auto;
	}

	.order-table tbody {
		display: flex;
		gap: 1rem;
		flex-direction:column;
		align-items:center;
	}

	.order-table tr {
		display: grid;
		border: 1px solid var(--bs-gray-500);
		border-radius: 9px;
		width: 500px;
		/* height: 300px; */
		padding: 0 10px;
		padding: 1rem;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
		align-items:end;
		grid-template-rows: auto auto;
		grid-auto-rows: min-content;
	}

	.order-table tbody tr td {
		display: flex;
		justify-content: start;
		line-height: 150%;
		align-items: center;
		padding-top:.5rem;
		padding-bottom:.5rem;
		height:auto;
		gap:1rem;
	}

	.order-table td[data-label="채권명"] {
		margin-bottom: auto;
		max-width: none !important;
		white-space: break-spaces;
		width: 100%;
		font-size: 1.5rem;
		text-align: left;
		grid-column: 1 / -1;
		font-weight: 700;

	}
	.order-table td[data-label="채권명"] {order:1;}
	.order-table td[data-label="원금"] {order:2;}
	.order-table td[data-label="등록일"] {order:4;}
	.order-table td[data-label="마감일"] {order:5;}
	.order-table td[data-label="상태"] {order:3;}
	.order-table td:before {
		content: attr(data-label);
		color: var(--bs-gray-700);
		font-weight:700;
	}
	
	.order-table td[data-label="사건 번호"] {
		display: none;
	}

	.order-table td:not([data-label="채권명"],
		[data-label="원금"],
		[data-label="등록일"],
		[data-label="마감일"],
		[data-label="상태"]) {
		order: 99;
	}

	.order-table td[data-label="No."],
	.order-table td[data-label="No."]:before,
	.order-table td[data-label="채권명"]:before {
		display: none;
	}
	#id__table_bids td:has(.btn) {
		width:100%;
	}
	
    #id__table_bids tbody td::before {
	content: attr(data-label) "\00a0\00a0" ;
	display: inline;
	font-weight: bold;
	color:var(--bs-gray-700);
    }
}
@media (max-width:768px) {
	.order-table tbody tr {
		width:100% !important;
	}
	
	.order-table tbody tr td{
		font-size:18px;
	}
}
/* 채권 거래 프로세스 */
.process-container {
	padding: 3rem 2rem;
	/* background: linear-gradient(275deg, rgba(240, 185, 250, 1) 0%, rgba(255, 196, 153, 1) 100%); */
	margin-bottom: 2rem;
	border-radius:9px;
	border:1px solid var(--page-theme);
}

.process-container .h4 {
	color: var(--page-theme);
}
.process-visual {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 50px;
  width:100%;
}
.process-visual .process-step {
  font-size: 1.2rem;
  color: #5a535a;
  display: inline-block;
  margin: 0 4px;
  width: 200px;
  box-shadow: 1px 1px 5px rgba(var(--page-theme-rgb), 0.3);
  padding: 1rem 0;
  background-color: rgba(255,255,255,0.5);
  border-radius:4px;
}

.process-visual .separator {
  font-size: 1.2rem;
  color: var(--bs-gray-700);
  margin: 0 4px;
}

@media (max-width: 1200px) {
	.process-container {
		padding: 2rem 1rem;
	}
	.process-container .text-white {
		text-align: center;;
	}
	.process-visual{
		display:flex;
		flex-direction:column;
		margin-top:25px;
	}
	.process-visual .process-step {
		width: 100%;
		margin-left: -.1rem;
	}
	.separator {
		transform:rotate(90deg);
	}
}

/* 테이블 등에 데이터가 없을 때 */
.no-data {
	color: var(--bs-gray-500);
	font-size: 1.2rem;
	text-align: center;
	width: 100%;
	padding: 20px;
	grid-column: span 4;
	display:block;
}

.claim-warning {
	display: inline-flex;
	width:100%;
	align-items: center;
	justify-content: flex:start;
	height: 100%;
	font-size: 1rem;
	color: var(--bs-danger);
	white-space:pre-wrap;
	border: 2px solid var(--bs-gray-300);
	min-height: 50px;
	border-radius: 6px;
	padding:1rem;
	margin-top: 1rem;;
}

/* faq */
/***********************faq***************************/
.article-faq {
	padding-bottom: 5rem;
}

.article-faq>.row {
	justify-content: space-between;
	height: 100%;
	flex-wrap: nowrap;
}

.article-faq .t-36 {
	margin-bottom: 3rem;
}

.faq-container {
	border: 1px solid var(--bs-primary);
	border-radius: 18px;
	max-width: 575px;
	overflow: hidden;
}

.faq-item {
	border-bottom: 1px solid var(--bs-primary);
	font-size: 20px;
	line-height: 300%;
	padding-left: 1rem;
	padding-right: 1rem;
	width: 100%;
	transition: all 0.3s ease-out;
	display: flex;
	cursor: pointer;
	height: 60px;
}

.faq-item .faq-text {
	width: max-content;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.faq-list>*:last-child {
	border: none;
}

.faq-item.active {
	background-color: var(--bs-primary);
	color: #fff;
	justify-content: center;
	position: relative;
}

.faq-item.active .faq-text {
	animation: slidethrough 10s linear infinite;
	position: absolute;
	left: 50%;
}

@keyframes slidethrough {
	0% {
		left: 40%;
	}

	100% {
		left: -100%;
	}
}

.faq-detail {
	position: relative;
	padding: 1rem;
	
	font-family: 'Pretendard Variable';
	font-weight:500;
}

.faq-detail:before {
	content: '';
	width: 100%;
	height: calc(100% + 2rem);
	border-left: 1px solid var(--bs-primary);
	border-right: 1px solid var(--bs-primary);
	position: absolute;
	left: 0;
	top: -1rem;
}

.faq-detail:after {
	content: '';
	height: 100%;
	width: calc(100% + 2rem);
	border-top: 1px solid var(--bs-primary);
	border-bottom: 1px solid var(--bs-primary);
	position: absolute;
	top: 0;
	left: -1rem;
}

.faq-detail .t-20 {
	
	font-family: 'Pretendard Variable';
	font-weight:500;
	white-space: pre-line;
}

.faq-detail .t-20 * {
	
	font-family: 'Pretendard Variable';
	font-weight:500;
	margin-bottom: 0.5rem;
}

/********* 모바일 faq 아코디언 ***************/
#faq-accordion-body {
	font-size: 16px;
	
	font-family: 'Pretendard Variable';
	font-weight:500;
	white-space: pre-line;
	overflow: hidden;
	transition: all 0.3s ease-out;
	padding: 1rem;
	border-bottom: 1px solid var(--bs-primary);
}

#faq-accordion-body .t-16 * {
	
	font-family: 'Pretendard Variable';
	font-weight:500;
	margin-bottom: 0.5rem;
}

#faq-accordion-body .faq-item.active+#faq-accordion-body {
	padding: 0.5rem;
	height: auto;
	border-bottom: 1px solid var(--bs-primary);
	opacity: 1;
}
#faq-container, #detail-box {
	background-color: #fff;
}
.article-faq #detail-box .t-24 {
	font-family: "SEBANG_Gothic";
}

@media (max-width: 1400px) {
	.article-faq>.row {
		justify-content: center;
	}
}

@media (max-width: 1200px) {
	.article-faq #detail-box {
		display: none;
	}
}

@media (max-width: 767.9px) {
	.article-faq #detail-box {
		display: none;
	}

	.faq-list .faq-item {
		max-width: calc(100vw - 1.5rem);
		font-size: 18px;
	}
}

.main_nav_toggle_btn {
	cursor:pointer;
}