/*마음진단 개인정보 동의 */
.mind-privacy-wrapper {
	
	.agg-title {			
		font-size: 28px;
		font-weight: bold;
		line-height: 1.07;
		letter-spacing: -0.56px;
		text-align: left;
		color: #222;	 
		margin: 28px 0 0;
		padding-block-end: 20px;
		border-bottom: 2px solid #222;
	}
	
	.agg-cont {
		background: #f5f5f5;
		padding: 60px;

	}
}

/*my Mind*/
@layer colors {
	:root {
		--color-orange-50: #ffedea;
		--color-orange-100: #ffded8;
		--color-orange-200: #ffb8a9;
		--color-orange-300: #ff9476;
		--color-orange-400: #ff690f;
		--color-orange-500: #d35400;
		--color-orange-600: #aa4200;
		--color-orange-700: #803000;
		--color-orange-800: #5b2000;
		--color-orange-900: #350f00;
		--color-orange-950: #240800;
	}
}

.mymind-wrapper {
	* {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
	}

	ul {
		list-style: none;
	}

	.filter-wrapper {
		display: flex;
		align-items: center;

		.right {
			display: flex;
			align-items: center;
			gap: 10px;
			margin-left: auto;
		}
	}

	.range-wrapper {
		display: flex;
		align-items: center;
		gap: 10px;

		em {
			font-style: normal;
		}
	}

	.description-wrapper {
		padding: 18px 20px 14px 20px;
		background-color: #f5f5f5;
		margin-block-start: 20px;

		.dash {
			font-size: 14px;
			line-height: 1.71;
			letter-spacing: -0.35px;
			text-align: left;
			color: #999;
			padding-left: 10px;
			text-indent: -10px;
		}

		.point {
			em {
				font-style: normal;
				font-weight: bold;
				color: var(--color-orange-400);
			}

			strong {
				color: #000;
			}
		}
	}

	.button {
		display: inline-flex;
		align-items: center;
		height: 30px;
		padding: 5px 12px 5px 11px;
		border-radius: 20px;
		background-color: var(--color-orange-400);
		font-size: 14px;
		font-weight: 500;
		line-height: 1.71;
		text-align: left;
		color: #fff;
		outline: none;
		border: 0;
		transition: all 0.3s ease;

		&:hover {
			background-color: var(--color-orange-500);
		}

		&.diag {
			height: 50px;			
			padding: 0 23px;
			border-radius: 5px;
			font-size: 16px;
			font-weight: 500;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 130px;
			gap: 11px;
		}

		&.search {
			height: 50px;			
			padding: 0 15px;
			border-radius: 5px;
			font-size: 16px;
			font-weight: 500;
			display: inline-flex;
			align-items: center;
			justify-content: center;			
		}

		.ico-link {			
			width: 14px;
			height: 14px;
			background: url(../images/mind/Ic_link.svg) no-repeat center;
			background-size: 100%;
		}
		&.list {
			width: 50px;
			height: 50px;
			border-radius: 10px;
			background: #f2f2f2 url(../images/mind/btn_list.svg) no-repeat center;
			background-size: 24px 24px;

			&:hover,
			&.on {
				background-image: url(../images/mind/btn_list_on.svg);
			}
		} 

		&.graph {
			width: 50px;
			height: 50px;
			border-radius: 10px;
			background: #f2f2f2 url(../images/mind/btn_graph.svg) no-repeat center;
			background-size: 24px 24px;

			&:hover,
			&.on {
				background-image: url(../images/mind/btn_graph_on.svg);
			}
		} 
	}
}

/*custom selectbox*/
.custom-selectbox {
	
	.dropdown {
		min-width: 148px;
		height: 50px;
		background: white;
		position: relative;
		border: solid 1px #d9d9d9;

		&::before {
			content: "";
			position: absolute;
			right: 20px;
			top: 20px;
			z-index: 9;
			width: 14px;
			height: 8px;
			background: url(../images/mind/ic_arrow_down.svg) no-repeat;
			background-size: 100%;
			pointer-events: none;
			transition: all 0.3s linear;
		}

		input {
			height: 100%;
			padding: 0 20px;
			cursor: pointer;
			border: none;
			outline: none;
			font-size: 16px;
			font-weight: 500;
			user-select: none;
			width: 100%;
		}

		.options {
			width: calc(100% + 2px);
			border-radius: 0px;
			padding: 10px 0;
			cursor: pointer;
			background: #fff;
			border: none;
			outline: none;
			box-shadow: 0 10px 25px rgba(124, 130, 141, 0.2);
			font-size: 14px;
			overflow: hidden;
			position: absolute;
			top: 48px;
			left: -1px;
			transition: all 0.3s ease;
			opacity: 0;
			transform: translateY(-50px);
			visibility: hidden;
			background: rgba(255, 255, 255, 1);
			backdrop-filter: blur(4.5px);
			-webkit-backdrop-filter: blur(4.5px);
			border: solid 1px #e5e5e5;
			border-top: 1px solid #d9d9d9;
			z-index: 10;
			max-height: 330px;
			overflow-y: auto;
			text-align: center;

			&::-webkit-scrollbar {
				width: 8px;
			}

			&::-webkit-scrollbar-thumb {
				height: 30%;
				background: #A1AAA9;
				border-radius: 3px;
			}

			&::-webkit-scrollbar-track {
				background: #fff;
			}

			.option {
				padding: 0 20px;
				border-radius: 0;
				transition: all 0.2s ease;
				color: #222;
				height: 30px;
				line-height: 30px;

				&:hover {
					opacity: 1;
					width: 100%;
					display: block;
					background-color: #f2f5f9;
				}
				&.active {
					background-color: #f2f5f9;
				}
			}

		}

		&.opened {

			.options {
				opacity: 1;
				visibility: visible;
				transform: translateY(0);
			}

			&::before {
				transform: rotate(180deg);
			}
		}
	}
}

.highlights__items {
	display: grid;
	gap: 17px;
	grid-template-columns: repeat(2, 200px);
	grid-template-rows: repeat(3, 200px);		
	align-items: center;

	.highlights__item {
		position: relative;		
		transition: .3s;
	
		.highlights__item_text {			
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: start;
			justify-content: end;
			padding: 20px;
		}
	
		.cat {			
			display: inline-block;
			height: 25px;
			padding: 0 8px;
			background-color: var(--color-orange-400);
			border-radius: 5px;
			font-size: 12px;
			font-weight: 500;			
			line-height: 25px;
			letter-spacing: -0.3px;
			text-align: left;
			color: #fff;
			margin-block-end: 4px;
			transition: 0.3s;

			&.off {
				background-color: #5b626e;
			}

			&.done {
				background-color: #222;
			}
		}

		.headline {
			font-size: 18px;
			font-weight: 500;			
			letter-spacing: -0.5px;
			text-align: left;
			color: #fff;
			margin-block-end: 10px;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 1.3em;
			max-height: 2.6em;
			word-wrap: break-word;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
	
		.description {
			display: none;
			font-size: 12px;				
			line-height: 1.42;
			letter-spacing: -0.3px;
			text-align: left;
			color: #fff;
			padding: 0;
			word-break: keep-all;
			transition: 0.3s;	
			overflow: hidden;
			text-overflow: ellipsis;			
			max-height: 5.68em;
			word-wrap: break-word;			
			-webkit-line-clamp: 4;
			-webkit-box-orient: vertical;
		}			

		.btn-link {
			display: none;
			background: none;
			outline: none;
			border: 0;
			font-size: 16px;		
			line-height: 1.29;
			letter-spacing: -0.35px;
			text-align: left;
			color: #fff;
			border-bottom: 1px solid #fff;
			transition: 0.3s;
		}
		
		.highlights__item__image {	
			display: block;
			width: 200px;
			height: 200px;	
			overflow: hidden;
			border-radius: 10px;
			position: relative;
			line-height: 0;

			img {
				width: 100%;
				height: 100%;
				max-width: 200px;
				max-height: 200px;
				object-fit: cover;
			}

			&::after {
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, 0.3);
				transition: 0.3s;
			}
		}

		&:hover {			
			transform: translateY(-10px);


			.highlights__item__image {

				&::after {					
					background-color: rgba(255, 105, 15, 0.75);
				}
			}

			.highlights__item_text {
				justify-content: start;

				/* .cat {
					background-color: #fff;
					color: var(--color-orange-400);
				} */

				.headline {
					margin-block-end: 4px;
				}

				.description {
					display: -webkit-box;
				}
				
				.button {
					display: none;
				}
	
				.button-wrapper {
					position: absolute;
					left: 20px;
					bottom: 20px;
				}

				.btn-link {					
					display: block;
				}
			}
		}	
	}
		
	.no-data {	
		width: 200px;
		height: 200px;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		background-color: #f2f2f2;		
	}
}

.no--data {
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	color: #888;

	&::before {
		content: '!';
		display: inline-flex;
		border: 2px solid #ccc;
		color: #ccc;
		border-radius: 50%;
		margin-right: 10px;
		font-size: 24px;
		width: 30px !important;
		height: 30px !important;
		line-height: 28px;
		font-weight: 700;
		align-items: center;
		justify-content: center;
	}
}

.card--list {
	margin-block-start: 40px;


	.card--item {
		margin-block-end: 50px;

		&:not(:last-of-type) {
			margin-block-end: 50px;
		}

		.date {
			display: inline-flex;
			align-items: center;
			height: 50px;			
			padding: 0 22px;
			border-radius: 48px;
			border: solid 1px #707070;
			background-color: #f5f5f5;
			font-size: 22px;	
			letter-spacing: -0.55px;
			color: #000;

			b {
				font-size: 28px;
				font-weight: bold;
				margin-inline-end: 15px;
			}
		}
	}
}

/*info-wrap*/
.info-wrap {
	position: relative;
	display: inline-block;
	line-height: 0;
	text-align: right;

	.ico-info {
		width: 16px;
		height: 16px;
		display: inline-block;
		margin-inline-start: 5px;
	}

	&:hover .tooltip {
		display: block;
	}

	.tooltip {
		display: none;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 30px;
		text-align: left;
		background-color: #fff;
		min-width: 120px;
		/* width: calc(100% - 15px); */
		width: auto;
		padding: 10px;
		border-radius: 10px;
		border: 1px solid #ccc;
		box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.15);

		.arrow,
		.arrow:after {
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
		}

		.arrow {
			bottom: -16px;
			left: 50%;
			transform: translateX(-50%);
			margin-left: 0;
			border-top-color: #ccc;
			border-bottom-width: 0;
			border-width: 8px;

			&:after {
				content: "";
				border-width: 7px;
				bottom: 1px;
				margin-left: -7px;
				border-top-color: #fff;
				border-bottom-width: 0;
			}
		}


		dl {
			position: relative;			
			line-height: 1.5;
		}

		dl+dl {
			margin-top: 4px;
		}

		dd {
			display: inline-block;
			font-size: 13px;
			text-align: left;
		}

		&.bottom {
			top: 30px;
			bottom: auto;
			z-index: 100;

			.arrow {
				top: -8px;
				bottom: auto;
				border-top-width: 0;
				border-bottom-color: #ccc;
				margin-inline-start: 5px;

				&:after {
					border-width: 7px;
					top: 2px;
					bottom: auto;
					border-bottom-color: #fff;
					border-top-width: 0;
				}
			}
		}
	}	
}

.result-wrapper {
	margin-block-start: 15px;
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr 420px;	
	align-items: start;

	.left-wrapper {
		display: flex;
		flex-direction: column;
		gap: 15px;
	}	
}

.summary-wrapper {
	padding: 20px 30px;
	background-color: rgba(255, 242, 223, 0.8);
	border-radius: 12px;
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 20px;
	align-items: center;
	height: 140px;

	.left {	
		display: flex;
		flex-direction: column;	
		text-align: center;
	}	

	.right {	
		display: flex;
		align-items: center;
	}	

	h6 {
		font-size: 15px;
		font-weight: 500;
		color: #5B5B5B;
	}

	.score {
		font-size: 20px;
		font-weight: 400;
		color: #757575;				
		position: relative;

		div {
			color: var(--color-orange-400);
			font-size: 48px;
			font-weight: 700;
			line-height: 48px;			
			display: inline-flex;

			span {
				position: absolute;				
				bottom: -38px;
				display: block;
				width: 100%;
				text-align: center;
				font-size: 15px;
				font-weight: 500;
				color: #8E8E8E;	
				left: 50%;
				transform: translateX(-50%);
				min-width: 70px;
			}
		}	
	}

	p {
		font-weight: 400;
		font-size: 12px;
		color: #656565;
		word-break: keep-all;
	}
}

.stat-wrapper {
	padding: 20px 30px;
	background-color: #f4f4f4;
	border-radius: 12px;
	height: 150px;
	display: grid;
	grid-template-columns: 1fr 140px;
	align-items: center;
	gap: 20px;

	.left {		
		display: flex;
		flex-direction: column;
	}

	.right {		
		display: flex;
		flex-direction: column;
		align-items: end;

		.graph {
			position: relative;

			.bar {
				position: absolute;
				top: 22px;
				left: 0px;
				width: 124px;
				height: 16px;
				
				.dot {
					position: absolute;		
					display: block;			
					top: 0;					
					height: 16px;
					width: 16px;
					height: 16px;
					background: url(../images/mind/lv_01_bar.svg) no-repeat;
					background-size: 100%;

					&::before {
						content: '';
						position: absolute;
						left: -5px;
						top: -22px;
						width: 24px;
						height: 20px;
						background: url(../images/mind/lv_01_txt.svg) no-repeat;
						background-size: 100%;
					}
				}

				&.lv_01 {
					.dot {
						&::before {
							left: -11px;
							width: 40px;
						}
					}
				}

				&.lv_02 {

					.dot {
						background-image: url(../images/mind/lv_02_bar.svg);

						&::before {						
							background-image: url(../images/mind/lv_02_txt.svg);
						}
					}
				}

				&.lv_03 {

					.dot {
						background-image: url(../images/mind/lv_03_bar.svg);
	
						&::before {
							background-image: url(../images/mind/lv_03_txt.svg);
						}
					}
				}

				&.lv_04 {
					.dot {
						background-image: url(../images/mind/lv_04_bar.svg);	
	
						&::before {
							background-image: url(../images/mind/lv_04_txt.svg);
						}
					}
				}

				&.lv_05 {
					.dot {
						background-image: url(../images/mind/lv_05_bar.svg);
	
						&::before {
							background-image: url(../images/mind/lv_05_txt.svg);
						}
					}
				}				
			}
		}
	}

	h6 {
		font-size: 14px;
		font-weight: 500;
		color: #8E8E8E;
		margin-block-end: 8px;
	}

	h3 {
		font-size: 16px;
		font-weight: 600;
		color: #000;
		margin-block-end: 10px;
	}

	p {
		font-weight: 400;
		font-size: 12px;
		color: #8E8E8E;
		word-break: keep-all;
	}
}

/* graph */
.graph-wrapper {

	h2 {
		padding-block-start: 50px;
		margin-block-end: 32px;
		text-align: center;
		
		span {
			display: inline-block;			
			height: 50px;
			padding: 0 15px;
			border-radius: 0px;
			border-bottom: solid 1px #000;
			font-size: 20px;
			font-weight: 500;
			line-height: 50px;
			letter-spacing: -0.55px;
			text-align: left;
			color: #000;
		}
	}

	.graph-inner-wrapper {
		padding: 24px;
		border-radius: 10px;
		border: solid 1px #dedede;
		background-color: #fff;
	}
	
	.chart-container {
		height: 530px;
		width: 100%;
	
		.canvasjs-chart-credit {
			display: none;
		}
	}
}

.legend-markers {
	display: flex;
	justify-content: end;
	gap: 10px;

	li {
		display: flex;
		align-items: center;
		gap: 5px;	
		font-size: 10px;	

		em {
			display: inline-block;
			width: 10px;
			height: 10px;
		}
	}
}

.ps-indent {
	padding-left: 15px;
	text-indent: -18px;
	word-break: keep-all;

	&.mt40 {
		margin-block-start: 40px;
	}
}

.section-title {
	position: relative;
}
.agg-header2 {
	h4 {
		font-size: 28px !important;
	}
}