@charset "utf-8";

body{
	background-color: var(--bg-color01);
}

#main{
	max-width: 1920px;
	margin: 0 auto;
}

#mobile_head{
	display: none;
}


/* ====================== 

* 대시보드 공통 헤더*

====================== */
#header{
    /* width: 21.5%; */
	/* width: 10.5%; */
	width: 200px;
    height: 100vh;

    box-sizing: border-box;
    padding: 40px;

    position: fixed;
    top: 0; left: 0;
    z-index: 99;

	transition: 0.4s;
}

#header:hover{
	/* width: 20%; */
	width: 370px;
}
    
#header .header-wrapper{
    width: 100%; height: 100%;

    background-color: var(--purple01);
    border-radius: 15px;

    position: relative;
}

    #header .h_logo{
        /* width: 75px; */
		width: 40px;
        margin: 0 auto;
        padding: 55px 0;

		transition: 0.4s;
    }

	#header:hover .h_logo{
		width: 55px;
	}
		
		/* #header:hover .h_logo{
			width: 75px;
		} */

        #header .h_logo a{
            display: block;
        }

        #header .h_logo figure{
            display: block;
            width: 100%;
        }
        #header .h_logo figure img{
            width: 100%;
            filter: invert(99%) sepia(0%) saturate(4431%) hue-rotate(93deg) brightness(110%) contrast(100%);
        }
        #header .h_logo figure figcaption{}

    
    #header .h_nav{
        margin-top: 30px;
        box-sizing: border-box;
        padding-left: 25px;
    }
        #header .h_nav .nav_cont{
            opacity: 0.5;
			transition: 0.4s;
        }
        #header .h_nav .nav_cont > a{
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 25px;

            padding: 20px 30px;
            border-radius: 50px 0 0 50px;

            background-color: rgba(255,255,255,0);

            /* transition: 0.4s; */

            position: relative;
			overflow: hidden;
        }
			#header .h_nav .nav_cont:not(.logout,.active):hover{
				opacity: 1;
			}
            #header .h_nav .nav_cont:not(.logout,.active):hover > a{
				/* opacity: 1; */
            }

			 #header .h_nav .nav_cont > a span{
				display: none;
			 }


        #header .h_nav .nav_cont i{
            display: inline-block;
            width: 20px;
			font-size: 1.25rem;
			color: #fff;

			position: relative;
        }
			#header .h_nav .nav_cont.logout i,
			#header .h_nav .nav_cont.login i{
				font-size: 1.4375rem;
				color: #fff;
			}
			#header .h_nav .nav_cont i::after{
				content: "";
				
				color: #fff;
				font-weight: 700;
				white-space: nowrap;

				position: absolute;
				top: 50%;
				left: calc( 20px + 20px );
				transform: translateY(-50%);
				font-style: normal;
				text-align: left;
				font-size: 1.0625rem;
				font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

				opacity: 0;
				transition: 0.4s;
			}
			#header:hover .h_nav .nav_cont i::after{
				opacity: 1;
			}

			#header .h_nav .nav_cont.dashboard i::after{
				content: "대시보드";
			}

			#header .h_nav .nav_cont.report i::after{
				content: "리포트";
			}

			#header .h_nav .nav_cont.logout i::after{
				content: "로그아웃";
			}

			#header .h_nav .nav_cont.login i::after{
				content: "로그인";
			}

			#header .h_nav .nav_cont.site i::after{
				content: "사이트";
			}

			#header .h_nav .nav_cont.place i::after{
				content: "도메인 나이";
			}

			#header .h_nav .nav_cont.blog i::after{
				content: "블로그";
			}

			#header .h_nav .nav_cont.cafe i::after{
				content: "카페";
			}

			#header .h_nav .nav_cont.active i::after{
				color: var(--purple01);
			}

			body.dark #header .h_nav .nav_cont.active i::after{
				color: #fff;
			}

            #header .h_nav .nav_cont i img{
                filter: invert(99%) sepia(0%) saturate(4431%) hue-rotate(93deg) brightness(110%) contrast(100%);
            }

        #header .h_nav .nav_cont span{
            font-size: 1.125rem;
            color: #fff;
            font-weight: 700;
			white-space: nowrap;
        }

        #header .h_nav .nav_cont.active{
            opacity: 1;
        }
        #header .h_nav .nav_cont.active > a{
            background-color: rgba(255,255,255,1);
			background-color: var(--bg-color01);
        }

		body.dark #header .h_nav .nav_cont.active > a{
            background-color: rgba(34,34,34,1);
        }
        #header .h_nav .nav_cont.active > a::before{
            content: '';

            width: 50px; height: 50px;
            background-color: transparent;
            box-shadow: 35px 35px 0 10px var(--bg-color01);
            border-radius: 50%;

            position: absolute;
            top: -50px; right: 0;
            pointer-events: none;
        }
		body.dark #header .h_nav .nav_cont.active > a::before{
			box-shadow: 35px 35px 0 10px var(--bg);
		}
        #header .h_nav .nav_cont.active > a::after{
            content: '';

            width: 50px; height: 50px;
            background-color: transparent;
            box-shadow: 35px -35px 0 10px  var(--bg-color01);
            border-radius: 50%;

            position: absolute;
            bottom: -50px; right: 0;
            pointer-events: none;
        }
		body.dark #header .h_nav .nav_cont.active > a::after{
			box-shadow: 35px -35px 0 10px var(--bg);
		}

        #header .h_nav .nav_cont.active i{
			color: var(--pink01);
		}
            #header .h_nav .nav_cont.active i img{
                filter: invert(43%) sepia(38%) saturate(3728%) hue-rotate(310deg) brightness(102%) contrast(98%);
            }

        #header .h_nav .nav_cont.active span{
            color: var(--purple01);
        }


        #header .h_nav .nav_cont.logout,
		#header .h_nav .nav_cont.login,
		#admin_info{
            position: absolute;
            bottom: 0; right: 0;
            width: calc(100% - 25px);
        }
        #header .h_nav .nav_cont.logout > a{}

        #header .h_nav .nav_cont.logout i{}
            #header .h_nav .nav_cont.logout i img{}

        #header .h_nav .nav_cont.logout span{}



#admin_info{
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
	/* justify-content: flex-start; */
	justify-content: center;
    gap: 20px;
	padding: 30px 40px;
	box-sizing: border-box;
	transition: 0.4s;
}
		#header:hover #admin_info{
		justify-content: flex-start;
	 }
    #admin_info .btn_setting{
        width: 0;
		opacity: 0;
		transition: 0.4s;

        cursor: pointer;
    }
		#header:hover #admin_info .btn_setting{
			width: 25px;
			opacity: 1;
		}

    #admin_info .btn_setting i{
        display: block;
		width: 20px; height: 20px;
    }
    #admin_info .btn_setting i img{
        width: 100%;
		filter: invert(100%) sepia(1%) saturate(1900%) hue-rotate(220deg) brightness(109%) contrast(100%);
		opacity: 0.5;

        transition: 0.2s;
    }
        #admin_info .btn_setting.active i img,
        #admin_info .btn_setting:hover i img{
			opacity: 1;
        }

    #admin_info .setting_box{
        position: absolute;
        /* top: calc(100% + 20px); */
		top: -210px;
		/* left: 0; */
		right: 40px;
        min-width: 220px;

        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(142,87,219,0.3);
        padding: 15px 10px;
    }
    #admin_info .setting_box ul{}
    #admin_info .setting_box ul li{}
    #admin_info .setting_box ul li:not(:last-child){
        margin-bottom: 10px;
    }
    #admin_info .setting_box ul li a{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;

        padding:12px 15px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(142,87,219,0);

        transition: 0.4s;
    }
        #admin_info .setting_box ul li a:hover{
            background-color: var(--bg-color02);
            box-shadow: 0 0 5px rgba(142,87,219,0.3);
        }
    #admin_info .setting_box ul li i{
        display: inline-block;
        width: 15px;
    }
	#admin_info .setting_box ul li a i,
    #admin_info .setting_box ul li span{
        color: var(--text-color03);
        font-size: 1rem;
        font-weight: 500;

        transition: 0.2s;
    }
	#admin_info .setting_box ul li a:hover i,
    #admin_info .setting_box ul li a:hover span{
        color: var(--purple01);
    }
	
	#admin_info .setting_box .dark-mode-toggle{
		padding: 15px;
	}

	#admin_info .setting_box .dark-mode-toggle h4{
		font-size: 0.875rem;
		color: var(--text-color03);
		font-weight: 400;
	}

	#admin_info .setting_box .dark-mode-toggle .toggle-box{
		margin-top: 10px;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}
	
	#admin_info .setting_box .dark-mode-toggle .toggle-box > div{}

	#admin_info .setting_box .dark-mode-toggle .toggle-box > div i{
		color: var(--purple01);
		opacity: 0.3;
		font-size: 1.125rem;
	}

	#admin_info .setting_box .dark-mode-toggle .toggle-box div.toggle{
		position: relative;
		cursor: pointer;
	}

	#admin_info .setting_box .dark-mode-toggle .toggle-box div.toggle .dot{
		width: 12px; height: 12px;
		background-color: var(--purple01);
		border-radius: 50%;
		position: absolute;
		top: 50%; left: 0;
		right: auto;
		transform: translateY(-50%);
		transition: 0.4s;
	}
		body.dark #admin_info .setting_box .dark-mode-toggle .toggle-box div.toggle .dot{
			left: auto; right: 0;
		}

	#admin_info .setting_box .dark-mode-toggle .toggle-box div.toggle .line{
		width: 120px; height: 1px;
		background-color: var(--purple01);
		opacity: 0.3;
	}

    #admin_info .user_info_box{
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        /* gap: 20px; */
		gap: 0;
    }




    #admin_info .user_info_box .info_left{
        text-align: left;
		width: 0;
		transition: 0.4s;
		opacity: 0;
    }

		#header:hover #admin_info .user_info_box .info_left{
			margin-left: 15px;
		}

	#header:hover #admin_info .user_info_box .info_left{
		width: 120px;
		opacity: 1;
	}

    #admin_info .user_info_box .info_left .user_name{
        color: #fff;
        font-size: 1.0625rem;
        font-weight: 600;
		white-space: nowrap;
    }
    #admin_info .user_info_box .info_left .user_name span{
        font-size: inherit;
        color: inherit;
		white-space: nowrap;
    }

    #admin_info .user_info_box .info_left .user_id{
        color: #fff;
        font-size: 0.8125rem;
		opacity: 0.7;
    }
    #admin_info .user_info_box .info_left .user_id span{
        color: inherit;
        font-size: inherit;
		white-space: nowrap;
    }

    #admin_info .user_info_box .info_right{
    }
    #admin_info .user_info_box .info_right figure{
		display: block;
		width: 35px; height: 35px;
		border-radius: 50%;
		overflow: hidden;
    }

    #admin_info .user_info_box .info_right figure img{
        width: 100%;
    }







	#dashboardContent{
		/* width: calc(100% -  10.5%); */
		width: calc(100% -  200px);
		min-height: 100vh;
		/* margin-left: 12%; */
		/* margin-left: calc(200px +  40px); */
		margin-left: 100px;
		box-sizing: border-box;
		padding: 40px;
		transition: 0.4s;
		padding-left: 0;
		padding-top: 60px;
	}
	#dashboardContent.hover{
		/* width: calc( 100% - 20% ); */
		width: calc(100% - 370px);
		 /* margin-left: calc(370px +  40px); */
		 margin-left: 370px;
		/* margin-left: 21.5%; */
	}



#dashboardContent > .title-box{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding-top: 0 !important;
}

#dashboardContent .title-box h2{
	font-size: 1.5625rem;
	font-weight: 800;
	color: var(--purple01);
	letter-spacing: -0.025rem;
}
	#dashboardContent .title-box h2 span{
		font-size: inherit;
		color: inherit;
		margin-right: 5px;
	}

#dashboardContent .title-box p{
	display: inline-block;
	font-size: 0.875rem;
	background-color: var(--yellow01);
	color: #fff;
	padding: 2px 10px;
	border-radius: 20px;
}


#dashboardContent .dashboard-content-top{
	display: flex;
	flex-direction: row;
	gap: 20px;
	margin-top: 20px;
}

#dashboardContent .dashboard-content-top .left-content{
	width: calc(50% - 20px);

	display: flex;
	flex-direction: column;
	gap: 20px;
}

#dashboardContent .dashboard-content-top .left-content .greeting-box{
	width: 100%;
	height: 240px;
	box-sizing: border-box;
	padding: 20px 50px;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;

	overflow: hidden;
	position: relative;
	border-radius: 20px;

	box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.05);
}

#dashboardContent .dashboard-content-top .left-content .greeting-box .bg-box{
	width: 100%; height: 100%;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	z-index: -1;
}

#dashboardContent .dashboard-content-top .left-content .greeting-box .bg-box video{
	width: 100%;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
}
	#dashboardContent .dashboard-content-top .left-content .greeting-box.day .bg-box video:not(.day){ display: none; }

	#dashboardContent .dashboard-content-top .left-content .greeting-box.evening .bg-box video:not(.evening){ display: none; }

	#dashboardContent .dashboard-content-top .left-content .greeting-box.night .bg-box video:not(.night){ display: none; }

#dashboardContent .dashboard-content-top .left-content .greeting-box .txt-box{}

#dashboardContent .dashboard-content-top .left-content .greeting-box .txt-box h3{
	font-size: 1.875rem;
	font-weight: 600;
}

	#dashboardContent .dashboard-content-top .left-content .greeting-box.day .txt-box h3{
		color: #336ca5;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box.evening .txt-box h3,
	#dashboardContent .dashboard-content-top .left-content .greeting-box.night .txt-box h3{
		color: #fff;
	}

#dashboardContent .dashboard-content-top .left-content .greeting-box .txt-box h3 strong{
	font-size: inherit;
	font-weight: 800;
}
	#dashboardContent .dashboard-content-top .left-content .greeting-box.day .txt-box h3 strong{
		color: #042d56;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box.evening .txt-box h3 strong,
	#dashboardContent .dashboard-content-top .left-content .greeting-box.night .txt-box h3 strong{
		color: #fff;
	}

#dashboardContent .dashboard-content-top .left-content .greeting-box .txt-box p{
	font-size: 1rem;
	margin-top: 20px;
	color: #fff;
}
#dashboardContent .dashboard-content-top .left-content .greeting-box .txt-box p span{
	color: inherit;
	font-weight: 500;
	font-size: inherit;
}

#dashboardContent .dashboard-content-top .left-content .greeting-box .btn_edit{
	display: inline-flex;
	height: auto;
	line-height: 1;
	gap: 10px;
	margin-top: 20px;
	padding: 12px 25px;
	border: 1px solid #fff;
	border-radius: 10px;
	font-size: 1rem;
	background-color: rgba(255,255,255,0.3);
	transition: 0.4s;
}
	#dashboardContent .dashboard-content-top .left-content .greeting-box.day .btn_edit{
		color: #042d56; 
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box.evening .btn_edit,
	#dashboardContent .dashboard-content-top .left-content .greeting-box.night .btn_edit{
		color: #fff; 
	}


#dashboardContent .dashboard-content-top .left-content .greeting-box .btn_edit:hover{
	background-color: rgba(255,255,255,0.5);
}

#dashboardContent .dashboard-content-top .left-content .greeting-box .btn_edit i,
#dashboardContent .dashboard-content-top .left-content .greeting-box .btn_edit span{
	color: inherit;
}

#dashboardContent .dashboard-content-top .left-content .state-list{
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

#dashboardContent .dashboard-content-top .left-content .state-list li{
	box-sizing: border-box;
	/* width: calc( ( 100% - 60px ) / 4 ); */
	width: calc( ( 100% - 40px ) / 3 );
	height: 150px;
	border-radius: 20px;
	border: 1px solid var(--gray);
	box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.1);
	background-color: #fff;
	transition: 0.4s;
}

#dashboardContent .dashboard-content-top .left-content .state-list li.site:hover{
	border-color: var(--purple03);
}

#dashboardContent .dashboard-content-top .left-content .state-list li.place:hover{
	border-color: var(--pink02);
}

#dashboardContent .dashboard-content-top .left-content .state-list li.blog:hover{
	border-color: var(--green02);
}

#dashboardContent .dashboard-content-top .left-content .state-list li.shopping:hover{
	border-color: var(--yellow02);
}

#dashboardContent .dashboard-content-top .left-content .state-list li a{
	display: block;
	padding: 20px;
	box-sizing: border-box;
	position: relative;
}

#dashboardContent .dashboard-content-top .left-content .state-list li .icon-box{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
}

	#dashboardContent .dashboard-content-top .left-content .state-list li.site .icon-box{
		background-color: var(--purple05);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.place .icon-box{
		background-color: var(--pink04);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.blog .icon-box{
		background-color: var(--green04);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.shopping .icon-box{
		background-color: var(--yellow04);
	}

#dashboardContent .dashboard-content-top .left-content .state-list li .icon-box i{
	font-size: 1rem;
}
	#dashboardContent .dashboard-content-top .left-content .state-list li.site .icon-box  i{
		color: var(--purple01);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.place .icon-box i{
		color: var(--pink01);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.blog .icon-box i{
		color: var(--green01);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.shopping .icon-box i{
		color: var(--yellow01);
	}

#dashboardContent .dashboard-content-top .left-content .state-list li .text-box{
	margin-top: 20px;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}

#dashboardContent .dashboard-content-top .left-content .state-list li .text-box p{
	font-size: 0.9375rem;
	color: var(--text-color03);
	font-weight: 500;
	padding-bottom: 5px;
}

#dashboardContent .dashboard-content-top .left-content .state-list li .text-box .count{}

#dashboardContent .dashboard-content-top .left-content .state-list li .text-box .count strong{
	font-size: 2.1875rem;
	font-weight: 800;
}

#dashboardContent .dashboard-content-top .left-content .state-list li .btn_view,
#dashboardContent .dashboard-content-bottom .recent-data-box .btn_view{
	position: absolute;
	top: 20px; right: 20px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7px;
	padding: 0;
	line-height: 1;
	height: auto;
}

#dashboardContent .dashboard-content-top .left-content .state-list li .btn_view span,
#dashboardContent .dashboard-content-bottom .recent-data-box .btn_view span{
	font-size: 0.75rem;
	text-transform: uppercase;
	color: var(--text-color03);
	font-weight: 500;
	transition: 0.4s;
}

	#dashboardContent .dashboard-content-top .left-content .state-list li.site:hover .btn_view span{
		color: var(--purple01);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.place:hover .btn_view span{
		color: var(--pink01); 
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.blog:hover .btn_view span{
		color: var(--green01);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.shopping:hover .btn_view span{
		color: var(--yellow01);
	}

#dashboardContent .dashboard-content-top .left-content .state-list li .btn_view i,
#dashboardContent .dashboard-content-bottom .recent-data-box .btn_view i{
	display: block;
	width: 10px; height: 0;
	border-left: 5px solid var(--text-color03);
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	margin-top: -2.5px;
	transition: 0.4s;
}
	#dashboardContent .dashboard-content-top .left-content .state-list li.site:hover .btn_view i{
		border-left-color: var(--purple01);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.place:hover .btn_view i{
		border-left-color: var(--pink01);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.blog:hover .btn_view i{
		border-left-color: var(--green01);
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li.shopping:hover .btn_view i{
		border-left-color: var(--yellow01);
	}



#dashboardContent .dashboard-content-top .right-content{
	width: 50%;
	height: calc( 240px + 20px + 150px );
	box-sizing: border-box;
	padding: 20px;
	box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.1);
	border: 1px solid var(--gray);
	border-radius: 20px;
	background-color: #fff;
}


#dashboardContent .dashboard-content-top .right-content .title-box{
	padding-top: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#dashboardContent .dashboard-content-top .right-content .title-box h3{
	font-size: 1.125rem;
}

#dashboardContent .dashboard-content-top .right-content .title-box form{
	position: relative;
	width: 350px;
}

#dashboardContent .dashboard-content-top .right-content .title-box form input{
	display: block;
	width: 100%;
	outline: none;
	border: 1px solid var(--gray);
	border-radius: 50px;
	font-size: 0.9375rem;
	color: var(--text-color02);
	padding: 12px 20px;
	padding-right: 90px;
}

#dashboardContent .dashboard-content-top .right-content .title-box form input::placeholder{
	color: var(--gray01);
}

#dashboardContent .dashboard-content-top .right-content .title-box form button{
	position: absolute;
	top: 50%; right: 0;
	transform: translateY(-50%);
	background-color: var(--purple01);
	border-radius: 50px;
	padding: 11px 20px;
	outline: none;
	border: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 3px;
	color: #fff;
	font-size: 0.9375rem;
}

#dashboardContent .dashboard-content-top .right-content .title-box form button i{
	color: inherit;
	font-size: inherit;
}

#dashboardContent .dashboard-content-top .right-content .title-box form button span{
	color: inherit;
	font-size: inherit;
	font-weight: 600;
}

#dashboardContent .dashboard-content-top .right-content .chart-box{
	margin-top: 15px;
}

#dashboardContent .dashboard-content-top .right-content .chart-box #chart{
	max-width: 100%;
	/* max-height: 320px; */
	max-height: 305px;
	min-height: 305px;
}



#dashboardContent .dashboard-content-bottom{
	margin-top: 20px;
	display: flex;
	align-items: center;
	gap: 20px;
}

#dashboardContent .dashboard-content-bottom > div{
	width: calc( (100% - 40px) / 3 );
	height: 370px;
	box-sizing: border-box;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.1);
    border: 1px solid var(--gray);
    border-radius: 20px;
    background-color: #fff;
}

#dashboardContent .dashboard-content-bottom > div .title-box{}

#dashboardContent .dashboard-content-bottom > div .title-box h3{
	font-size: 1.125rem;
}

#dashboardContent .dashboard-content-bottom .recent-data-box{}

#dashboardContent .dashboard-content-bottom .recent-data-box table{
	width: 100%;
	border-collapse: collapse;
	margin-top: 15px;
	table-layout: fixed;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table tr{
	vertical-align: middle;
}



#dashboardContent .dashboard-content-bottom .recent-data-box table tr td{
	box-sizing: border-box;
	padding: 10px 5px;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table tr td span{
	display: block;
	white-space: nowrap;
	max-width: 95%;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.9375rem;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .td_category{
	width: 10%;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .td_category span{
	display: block;
	width: 40px; height: 40px;
	border-radius: 50%;
	position: relative;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .site .td_category span{
	background-color: var(--purple05);
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .place .td_category span{
	background-color: var(--pink04);
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .blog .td_category span{
	background-color: var(--green04);
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .td_category span::after{
	content: "";
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	font-size: 1rem;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .site .td_category span::after{
	content: "\f2d2";
	color: var(--purple01);
	font-weight: 400;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .place .td_category span::after{
	content: "\f3c5";
	color: var(--pink01);
	font-weight: 900;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .blog .td_category span::after{
	content: "\f781";
	color: var(--green01);
	font-weight: 900;
}


#dashboardContent .dashboard-content-bottom .recent-data-box table .td_name{
	width: 45%;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .td_name .data-name{
	font-size: 0.9375rem;
	font-weight: 800;
	max-width: 100%;
	overflow:hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .td_name .data-url{
	margin-top: 5px;
	font-size: 0.75rem;
	color: var(--text-color03);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .td_date{
	width: 16%;
}
#dashboardContent .dashboard-content-bottom .recent-data-box table .td_date span{
	color: var(--text-color03);
	font-size: 0.75rem;
	font-weight: 400;
	text-align: center;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .td_report{
	width: 12%;
	text-align: center;
	color: var(--purple02);
}

#dashboardContent .dashboard-content-bottom .recent-data-box .btn_view{
	position: static;
	justify-content: center;
}

#dashboardContent .dashboard-content-bottom .recent-data-box .btn_view:hover span{
	color: var(--purple01);
}

#dashboardContent .dashboard-content-bottom .recent-data-box .btn_view:hover i{
	border-left-color: var(--purple01);
}

#dashboardContent .dashboard-content-bottom .recent-data-box table .td_report a,
#dashboardContent .dashboard-content-bottom .recent-data-box table .td_report a i{
	color: inherit;
	font-size: 1.125rem;
}

#dashboardContent .dashboard-content-bottom .recent-data-box table tbody tr:not(:last-of-type){
	border-bottom: 1px dashed var(--gray);
}


#dashboardContent .dashboard-content-bottom .topic-list-box{
	margin-top: 25px;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul{
	width: 50%;
	box-sizing: border-box;
}

#dashboardContent .dashboard-content-bottom .topic-list-box .topic-left{
	padding-right: 10px;
}

#dashboardContent .dashboard-content-bottom .topic-list-box .topic-right{
	padding-left: 10px;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li{}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li:not(:first-of-type){
	margin-top: 35px;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li a{
	display: flex;
	align-items: center;
	gap: 10px;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .number{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 25px; height: 25px;
	border-radius: 50%;
	background-color: var(--gray);
	color: var(--text-color02);
	font-size: 0.9375rem;
	font-weight: 800;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li.rank .number{
	background-color: var(--purple05);
	color: var(--purple01);
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .keyword{
	display: block;
	max-width: 72%;
	width: 72%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li.rank .keyword{
	font-weight: 600;
	
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .icon{
	display: block;
	width: 16px; height: 16px;
	position: relative;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .icon::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%,-50%);
	display: inline-block;
font-family: "Font Awesome 5 Free";
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .icon.same::after{
	content: "\f068";
	font-weight: 900;
	font-size: 1rem;
	color: var(--text-color02);
	font-size: 0.875rem;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .icon.up::after{
	content: "\f0d8";
	font-weight: 900;
	color: var(--pink01);
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .icon.down::after{
	content: "\f0d7";
	font-weight: 900;
	color: #5184ec;
}

#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .icon.new::after{
	content: "\2b";
	font-weight: 900;
	color: var(--yellow01);
	font-size: 0.875rem;
}


#dashboardContent .dashboard-content-bottom .notice-box{}

#dashboardContent .dashboard-content-bottom .notice-box .title-box{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#dashboardContent .dashboard-content-bottom .notice-box .title-box h3{}

#dashboardContent .dashboard-content-bottom .notice-box .btn_view{
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: auto;
	line-height: 1;
}

#dashboardContent .dashboard-content-bottom .notice-box .btn_view span{
	font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--text-color03);
    font-weight: 500;
    transition: 0.4s;
}

#dashboardContent .dashboard-content-bottom .notice-box .btn_view:hover span{
	color: var(--purple01);
}

#dashboardContent .dashboard-content-bottom .notice-box .btn_view i{
	display: block;
    width: 10px;
    height: 0;
    border-left: 5px solid var(--text-color03);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-top: -2.5px;
    transition: 0.4s;
}

#dashboardContent .dashboard-content-bottom .notice-box .btn_view:hover i{
	border-left-color: var(--purple01);
}


#dashboardContent .dashboard-content-bottom .notice-box .notice-list{
	margin-top: 25px;
}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li{}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li:not(:first-of-type){
	margin-top: 4px;
}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li a{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li:first-of-type a{
	padding-top: 0;
}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li:not(:last-of-type) a{
	border-bottom: 1px dashed var(--gray);
}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li .number{
	display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--gray);
    color: var(--text-color02);
    font-size: 0.9375rem;
    font-weight: 800;
}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li .title{
	display: block;
	width: 82%;
	max-width: 82%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1rem;
	font-weight: 600;
}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li:hover .btn_view span{
	color: var(--purple01);
}

#dashboardContent .dashboard-content-bottom .notice-box .notice-list li:hover .btn_view i{
	border-left-color: var(--purple01);
}


@media screen and (max-width: 1600px){
	#dashboardContent .dashboard-content-bottom .recent-data-box table .td_name{
		width: 30%;
	}

	#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .keyword{
		width: 62%;
		max-width: 62%;
	}
}

@media screen and (max-width: 1500px){
	#header:hover{
		width: 330px;
	}

	#header:hover .h_logo{
		width: 50px;
	}

	#dashboardContent.hover{
		width: calc(100% - 330px);
		 margin-left: 330px;
	}

	#dashboardContent .dashboard-content-top{
		gap: 10px;
	}

	#dashboardContent .dashboard-content-top .left-content{
		width: calc( 50% - 10px );
		gap: 10px;
	}

	#dashboardContent .dashboard-content-top .right-content {
		height: calc( 240px + 10px + 140px );
	}

	#dashboardContent .dashboard-content-top .left-content .state-list{
		gap: 10px;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li{
		width: calc( (100% - 20px) / 3 );
		height: 140px;
	}

	#dashboardContent .dashboard-content-bottom{
		margin-top: 10px;
		gap: 10px;
		flex-wrap: wrap;
	}

	#dashboardContent .dashboard-content-bottom > div {
		width: calc( (100% - 10px) / 2 );
	}

	#dashboardContent .dashboard-content-bottom .recent-data-box table .td_name .data-url{
		margin-top: 2px;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box form{
		width: 320px;
	}
	

	#dashboardContent .dashboard-content-top .left-content .greeting-box{
		padding: 20px 35px;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box .txt-box h3{
		font-size: 1.75rem;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box .txt-box p{
		margin-top: 10px;
		font-size: 0.9375rem;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box .btn_edit{
		padding: 10px 25px;
	}
	
	#dashboardContent > .title-box{
		gap: 10px;
	}
	#dashboardContent .title-box h2{
		font-size: 1.375rem;
	}
	
	#dashboardContent .title-box p{
		font-size: 0.75rem;
	}

	#dashboardContent .dashboard-content-top{
		margin-top: 15px;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box h3,
	#dashboardContent .dashboard-content-bottom > div .title-box h3{
		font-size: 1.0625rem;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li .text-box p{
		font-size: 0.875rem;
	}
	#dashboardContent .dashboard-content-top .left-content .state-list li .text-box .count strong{
		font-size: 2rem;
	}


	#dashboardContent .dashboard-content-top .right-content .title-box form input,
	#dashboardContent .dashboard-content-top .right-content .title-box form button{
		padding: 10px 20px;
		font-size: 0.875rem;
	}

	#dashboardContent .dashboard-content-bottom .recent-data-box table .td_name{
		width: 50%;
		max-width: 50%;
	}
	#dashboardContent .dashboard-content-bottom .recent-data-box table .td_date{
		width: 20%;
		max-width: 20%;
	}
}


@media screen and (max-width: 1300px){
	#mobile_head{
		display: block;
		position: fixed;
		top: 0; left: 50%;
		transform: translateX(-50%);
		background-color: var(--bg-color01);
		border: 1px solid var(--purple04);
		height: 70px;
		width: 640px;
		z-index: 909090;
	}

	#mobile_head .wrapper{
		width: 100%;
		height: 100%;
	}

	#mobile_head .wrapper a{
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 5px;
		width: 100%; height: 100%;
	}
	
	#mobile_head figure{
		display: block;
		width: 40px;
	}

	#mobile_head figure img{
		width: 100%;
	}

	#mobile_head h1{
		font-size: 1.875rem;
		font-weight: 400;
	}

	#main{
		width: 640px;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 0 10px;
		border-left: 1px solid var(--purple04);
		border-right: 1px solid var(--purple04);
	}

	#header,
	#header:hover{
		width: 640px;
		height: auto;
		left: 50%;
		top: auto;
		bottom: 0;
		transform: translateX(-50%);
		padding: 0;
	}

	#header .header-wrapper{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80px;
		padding-top: 10px;
		box-sizing: border-box;
		padding: 20px;
	}

	#header .h_nav .nav_cont.logout, #header .h_nav .nav_cont.login, #admin_info{
		position: static;
		width: auto;
	}

	#header .h_logo{
		position: absolute;
		top: -40px;
		padding: 0;
		background-color: var(--purple01);
		width: 80px;
		height: 80px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;

		display: none;
	}
	#header .h_logo,
	#header:hover .h_logo{
		width: 80px;
	}

	#header .h_logo figure{
		width: 65px;
		height: 65px;
		background-color: #fff;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#header .h_logo figure img{
		width: 50px;
		filter: unset;
	}


	#dashboardContent,
	#dashboardContent.hover{
		width: 100%;
		margin-left: 0;
		padding: 0;
		padding-bottom: 100px;
		padding-top: 70px;
	}

	#header .h_nav{
		display: flex;
		width: 100%;
		margin-top: 0;
		padding: 0;
		align-items: center;
		justify-content: center;
	}

	#header .h_nav .nav_cont{
		width: calc( 100% / 5 ) !important;
	}

	#header .h_nav .nav_cont > a{
		justify-content: center;
		padding: 0;
		flex-direction: column;
		gap: 5px;
	}

	#header .h_nav .nav_cont.active > a{
		background-color: transparent;
	}
	
	#header .h_nav .nav_cont.active > a::before,
	#header .h_nav .nav_cont.active > a::after{
		display: none;
	}

	#header .h_nav .nav_cont > a figure{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30px; height: 30px;
		border-radius: 5px;
	}

	#header .h_nav .nav_cont.active > a figure{
		background-color: #fff;
	}

	#header .h_nav .nav_cont i{
		height: 20px;
	}

	#header .h_nav .nav_cont i::after{
		display: none;
	}

	#header .h_nav .nav_cont > a span{
		display: block;
		font-size: 0.875rem;
	}

	#header .h_nav .nav_cont.active span{
		color: #fff;
	}

	

	#dashboardContent .dashboard-content-top{
		flex-wrap: wrap;
	}
	
	#dashboardContent .dashboard-content-top .left-content,
	#dashboardContent .dashboard-content-top .right-content{
		width: 100%;
	}


	#dashboardContent .dashboard-content-bottom > div{
		width: 100%;
	}

	#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .keyword{
		width: 70%;
		max-width: 70%;
	}

	#admin_info{
		padding: 0;
		width: calc(100% / 5);
	}

	#header:hover #admin_info{
		justify-content: center;
	 }

	#admin_info .user_info_box .info_left,
	#admin_info .btn_setting{
		display: none;
	}


}


@media screen and (max-width: 1100px){
	#mobile_head{
		width: 100%;
	}

	#main{
		width: 100%;
		padding: 0 5%;
	}

	#header, #header:hover{
		width: 90%;
	}
}

@media screen and (max-width: 767px){
	#mobile_head{
		height: 55px;
	}
	
	#mobile_head figure{
		width: 30px;
	}
	#mobile_head h1{
		font-size: 1.375rem;
	}



	#header, #header:hover{
		background-color: var(--bg-color01);
		width: 100%;
		padding-bottom: 20px;
	}

	#header .header-wrapper{
		border-radius: 15px;
		width: 90%;
		margin: 0 auto;
		padding: 10px;
	}

	#header .h_nav .nav_cont > a{
		gap: 3px;
	}

	
	#header .h_nav .nav_cont > a span{
		font-size: 0.7125rem;
	}

	#admin_info .user_info_box .info_right figure{
		width: 30px; height: 30px;
	}
	


	#dashboardContent .title-box h2{
		font-size: 1.25rem;
	}
	#dashboardContent .title-box p{
		font-size: 0.7125rem;
	}

	#dashboardContent, #dashboardContent.hover{
		padding-top: 60px;
		padding-bottom: 130px;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box h3, #dashboardContent .dashboard-content-bottom > div .title-box h3{
		font-size: 1rem;
	}

	#dashboardContent .dashboard-content-top{
		gap: 7px;
	}

	#dashboardContent .dashboard-content-top .left-content{
		gap: 7px;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box.day .txt-box h3{
		font-size: 1.375rem;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box .txt-box p{
		font-size: 0.8125rem;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box .btn_edit{
		font-size: 0.8125rem;
		gap: 5px;
		padding: 8px 15px;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box{
		height: 200px;
		padding: 20px;
		border-radius: 15px;
	}

	#dashboardContent .dashboard-content-top .left-content .greeting-box .bg-box video{
		width: auto;
		height: 110%;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list{
		flex-wrap: wrap;
		gap: 7px;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li{
		/* width: 100%; */
		height: auto;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li a{
		border-radius: 15px;
		padding: 10px 10px;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li .btn_view{
		right: 10px;
		top: 12px;
	}
	
	#dashboardContent .dashboard-content-top .left-content .state-list li .icon-box{
		width: 30px; height: 30px;
	}
	#dashboardContent .dashboard-content-top .left-content .state-list li .icon-box i{
		font-size: 0.875rem;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li .text-box{
		flex-direction: column;
		margin-top: 10px;
	}
	
	#dashboardContent .dashboard-content-top .left-content .state-list li .text-box p{
		width: 100%;
		font-size: 0.75rem;
		/* display: none; */
		padding-bottom: 0;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li .text-box .count strong{
		font-size: 1.75rem;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li .btn_view span, #dashboardContent .dashboard-content-bottom .recent-data-box .btn_view span,
	#dashboardContent .dashboard-content-bottom .notice-box .btn_view span{
		font-size: 0.7125rem;
	}

	#dashboardContent .dashboard-content-top .left-content .state-list li .btn_view i, #dashboardContent .dashboard-content-bottom .recent-data-box .btn_view i,
	#dashboardContent .dashboard-content-bottom .notice-box .btn_view i{
		width: 5px;
		border-left-width: 4px;
		border-top-width: 3px;
		border-bottom-width: 3px;
	}

	#dashboardContent .dashboard-content-top .right-content{
		border-radius: 15px;
		height: auto;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box{
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 12px;
	}
	#dashboardContent .dashboard-content-top .right-content .title-box h3{
		width: 100%;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box form button{
		height: 100%;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box form{
		width: 100%;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box form button span{
		display: none;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box form input{
		font-size: 0.8125rem;
		padding: 8px 10px;
	}

	#dashboardContent .dashboard-content-top .right-content .title-box form input::placeholder{
		font-size: 0.75rem;
	}

	#dashboardContent .dashboard-content-top .right-content .chart-box #chart{
		max-height: 0;
		min-height: 150px;
		height: auto;
	}

	#dashboardContent .dashboard-content-bottom{
		margin-top: 7px;
		gap: 7px;
	}

	#dashboardContent .dashboard-content-bottom > div{
		border-radius: 15px;
		height: auto;
	}

	#dashboardContent .dashboard-content-bottom .recent-data-box table{
		margin-top: 15px;
	}

	#dashboardContent .dashboard-content-bottom .recent-data-box table .td_date{
		display: none;
	}

	#dashboardContent .dashboard-content-bottom .recent-data-box table .td_category span{
		width: 30px; height: 30px;
		font-size: 0.875rem;
	}

	#dashboardContent .dashboard-content-bottom .recent-data-box table .td_category span::after{
		font-size: 0.875rem;
	}

	#dashboardContent .dashboard-content-bottom .recent-data-box table .td_name .data-name{
		font-size: 0.875rem;
	}

	#dashboardContent .dashboard-content-bottom .topic-list-box,
	#dashboardContent .dashboard-content-bottom .notice-box .notice-list{
		margin-top: 17px;
	}

	#dashboardContent .dashboard-content-bottom .topic-list-box > ul li:not(:first-of-type){
		margin-top: 15px;
	}

	#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .number,
	#dashboardContent .dashboard-content-bottom .notice-box .notice-list li .number{
		width: 20px; height: 20px;
		font-size: 0.8125rem;
	}

	#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .keyword,
	#dashboardContent .dashboard-content-bottom .notice-box .notice-list li .title{
		font-size: 0.8125rem;
	}

	#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .icon.same::after,
	#dashboardContent .dashboard-content-bottom .topic-list-box > ul li .icon.new::after{
		font-size: 0.75rem;
	}
}



/* =========================

* 등록한 사이트 리스트 + 사이트 등록 폼 *

========================= */

#dashboardContent .btn_back{
	color: var(--purple01);
	font-size: 1.25rem;
	font-weight: 700;

	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

#dashboardContent .btn_back span,
#dashboardContent .btn_back i{
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

#dashboardContent .btn_back i{}

#reg-form{
	border: 1px solid var(--gray);
	border-radius: 15px;
    box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.1);
    box-sizing: border-box;
    padding: 25px 30px;
    position: relative;
	background-color: #fff;
	margin-top: 30px;

	display: flex;
	flex-direction: row;
	gap: 15px;
	flex-wrap: wrap;
	/* align-items: center; */
	align-items: stretch;
	/* justify-content: flex-end; */
	justify-content: center;
}

#reg-form h3{
	width: 100%;
	font-weight: 800;
	font-size: 1.125rem;
	margin-bottom: 5px;
}

#reg-form fieldset{
	width: calc( ( ( 100% - 200px ) - 45px ) / 3 );
	position: relative;
}


#reg-form fieldset label{
	font-size: 0.9375rem;
	color: var(--gray01);
	text-indent: 0;
	overflow: unset;
	top: 50%; left: 20px;
	transform: translateY(-50%);
	position: absolute;
	z-index: 3;
	transition: 0.4s;
	pointer-events: none;
}

#reg-form fieldset input{
	display: block;
	box-sizing: border-box;
	outline: none;
	border: 0;
	/* border-bottom: 1px solid var(--gray01); */
	/* margin-top: 20px; */
	padding: 12px 20px;
	/* background-color: var(--bg-color03); */
	background-color: #fff;
	border: 1px solid var(--gray);
	border-radius: 5px;
	/* font-size: 1.0625rem; */
	font-size: 1rem;

	width: 100%;
	transition: 0.4s;
}

#reg-form fieldset input:hover{
	    border-color: var(--gray01);
}


#reg-form fieldset input:focus{
	    border-color: var(--purple01);

}

#reg-form fieldset input::placeholder{
	/* color: var(--gray01); */
	color: #fff;
	transition: 0.4s;
	font-size: 0.9375rem;
}

#reg-form fieldset input:focus ~ label,
#reg-form fieldset input:valid ~ label{
	top: 0px;
	left: 7px;
	color: var(--purple01);
	font-size: 0.875rem;
	background-color: #fff;
	padding: 0 10px;
}

#reg-form fieldset input:focus::placeholder{
	color: var(--gray01);
}

#reg-form .btn-reg{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	background-color: var(--purple01);
	border: 0;
	outline: none;
	color: #fff;
	cursor: pointer;

	font-size: 1rem;
	font-weight: 700;
	padding: 12px 50px;
	/* border-radius: 50px; */
	border-radius: 5px;
	/* width: 15%; */
	width: 200px;
}

#reg-form .btn-reg .chart_ani{
	display: flex;
	flex-direction: row;
	gap: 3px;
	align-items: flex-end;
}

#reg-form .btn-reg .chart_ani span{
	display: block;
	width: 4px; height: 20px;
	background-color: #fff;\
	border-radius: 50px;

	transition: 0.4s;
}

#reg-form .btn-reg .chart_ani span:nth-child(1){
	height: 15px;
}

#reg-form .btn-reg .chart_ani span:nth-child(2){}

#reg-form .btn-reg .chart_ani span:nth-child(3){
	height: 10px;
}


#reg-form .btn-reg:hover .chart_ani span:nth-child(1){
	animation: ani01 0.8s forwards ease-in-out;
}

#reg-form .btn-reg:hover .chart_ani span:nth-child(2){
	animation: ani02 0.9s forwards ease-in-out;
}

#reg-form .btn-reg:hover .chart_ani span:nth-child(3){
	animation: ani03 0.7s forwards ease-in-out;
}

@keyframes ani01{
	0%{
		height: 17px;
	}
	50%{
		height: 12px;
	}
	100%{
		height: 15px;
	}
}

@keyframes ani02{
	0%{
		height: 15px;
	}
	50%{
		height: 22px;
	}
	100%{
		height: 20px;
	}
}

@keyframes ani03{
	0%{
		height: 15px;
	}
	50%{
		height: 8px;
	}
	100%{
		height: 10px;
	}
}


#report_list{
	margin-top: 45px;
}

#report_list .list_desc{
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color02);
}

#report_list .list_desc .total{
	font-weight: 800;
	font-size: 1.0625rem;
	color: var(--purple01);
	letter-spacing: -0.05rem;
}

#report_list .list-cont{
	/* margin-top: 40px; */
	margin-top: 20px;
	height: 565px;
	overflow-y: auto;
	box-sizing: border-box;
	padding-right: 20px;
}

#report_list .list-cont .list-item{
	height: 85px;
	border-radius: 10px;
	background-color: #fff;
    box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.1);
    box-sizing: border-box;
    /* padding: 35px 30px; */
	padding: 16px 20px;
    position: relative;
    display: flex;
    flex-direction: row;
    /* gap: 60px; */
	gap: 20px;
    align-items: center;
	border: 1px solid var(--gray);
	position: relative;

	transition: 0.4s;
}

#report_list .list-cont .list-item::after{
	content: "";
	width: 100%; height: 100%;
	background-color: transparent;
	border: 3px solid transparent;
	pointer-events: none;
	position: absolute;
	top: 0; left: 0;
	border-radius: 10px;
	transition: 0.4s;
}

#report_list .list-cont .list-item:hover::after{
	border-color: var(--purple01);
}

#report_list .list-cont .list-item:not(:first-of-type){
	margin-top: 10px;
}

#report_list .list-cont::-webkit-scrollbar{
	width: 5px;
}

#report_list .list-cont::-webkit-scrollbar-thumb{
	width: 100%;
	background-color: var(--purple01);
	border-radius: 50px;
}

#report_list .list-cont::-webkit-scrollbar-track{
	width: 100%;
	background-color: var(--purple04);
}

#report_list .list-cont .list-item .favicon-box{
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	width: 50px; height: 50px;
	border-radius: 5px;
	border: 1px solid var(--gray01);
	overflow: hidden;
}

#report_list .list-cont .list-item .favicon-box img{
	width: 25px;
}

#report_list .list-cont .list-item .favicon-box img.no-image{
	content: url(/img/no-img.png);
	width: 30px;
}

#report_list .list-cont .list-item .site-name{
	/* width: 70%; */
	/* width: 80%; */
	width: 65%;
}

#report_list .list-cont .list-item .site-name a{}

#report_list .list-cont .list-item .site-name .nickname_box{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

#report_list .list-cont .list-item .site-name .data-nickname{
	font-size: 1.125rem;
	font-weight: 700;
}

#report_list .list-cont .list-item .site-name .data-status{
	display: inline-block;
	font-size: 0.75rem;
	padding: 2px 7px;	
	border-radius: 3px;
	font-weight: 500;
}

	#report_list .list-cont .list-item.good .site-name .data-status{
		    background-color: var(--green04);
			color: var(--green01);
	}

	#report_list .list-cont .list-item.normal .site-name .data-status{
		    background-color: var(--yellow04);
			color: var(--yellow01);
	}

	#report_list .list-cont .list-item.bad .site-name .data-status{
		    background-color: var(--pink04);
			color: var(--pink01);
	}

#report_list .list-cont .list-item .site-name .url_box{
	margin-top: 2px;
	font-size: 0.875rem;
	color: var(--gray01);
}

#report_list .list-cont .list-item .site-name .data-url{
	font-size: inherit;
	color: inherit;
}

#report_list .list-cont .list-item .site-keyword{
	width: 15%;
}

#report_list .list-cont .list-item .site-keyword h4{
	font-size: 0.875rem;
	color: var(--text-color03);
	font-weight: 400;
}

#report_list .list-cont .list-item .site-keyword .data-keyword{
	font-size: 1rem;
	font-weight: 600;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


#report_list .list-cont .site-score{
	padding-top: 5px;
}

#report_list .list-cont .site-score p{
	font-size: 0.875rem;
	margin-top: 5px;
	color: var(--text-color03);
}

#report_list .list-cont .site-score p span{
	font-size: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
}

#report_list .list-cont .site-score .score_chart{
	width: 200px;
	height: 5px;
	background-color: var(--gray);
	position: relative;
	border-radius: 50px;
	overflow: hidden;
}
	#report_list .list-cont .site-score .score_chart .color{
		content: "";
		width: 10%;
		height: 100%;
		position: absolute;
		top: 0; left: 0;
		transition: 0.4s;
		transition-delay: 0.5s;
		transition-timing-function: cubic-bezier(0.7, 0.01, 0.58, 1);
	}

	#report_list .list-cont .list-item.good .site-score .score_chart .color{
		background-color: var(--green01);
	}

	#report_list .list-cont .list-item.normal .site-score .score_chart .color{
		background-color: var(--yellow01);
	}

	#report_list .list-cont .list-item.bad .site-score .score_chart .color{
		background-color: var(--pink01);
	}



	#report_list .list-cont .control_btn{
		position: relative;
	}

	#report_list .list-cont .control_btn .dot{
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 6px;
		cursor: pointer;
		background-color: transparent;
		outline: none;
		border: 0;
	}

	#report_list .list-cont .control_btn .dot span{
		display: block;
		width: 6px; height: 6px;
		background-color: var(--gray01);
		border-radius: 50%;
		transition: 0.4s;
	}

	#report_list .list-cont .control_btn:hover .dot span{
		background-color: var(--purple01);
	}

	#report_list .list-cont .control_btn .hover-box{
		position: absolute;
		top: 25px; right: 0;
		transform: translateX(25%);
		opacity: 0;
		width: 110px;
		transition: 0.4s;
		pointer-events: none;
		background-color: #fff;
		padding: 15px 10px;
		z-index: 5;
		box-shadow: 0 0 5px rgba(142,87,219,0.3);
		border-radius: 15px;
	}

	#report_list .list-cont .control_btn .dot:focus + .hover-box{
		opacity: 1;
		pointer-events: all;
	}

	#report_list .list-cont .control_btn .hover-box li{	}

	#report_list .list-cont .control_btn .hover-box li a{
	display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;

        padding:12px 15px;
        border-radius: 5px;
        box-shadow: 0 0 10px rgba(142,87,219,0);

        transition: 0.4s;
	}
	
	#report_list .list-cont .control_btn .hover-box li a:hover{
		background-color: var(--bg-color02);
        box-shadow: 0 0 5px rgba(142,87,219,0.3);
	}

	#report_list .list-cont .control_btn .hover-box li i,
	#report_list .list-cont .control_btn .hover-box li span{
		color: var(--text-color03);
		font-size: 1rem;
		font-weight: 500;
		transition: 0.2s;
	}

	#report_list .list-cont .control_btn .hover-box li:hover i,
	#report_list .list-cont .control_btn .hover-box li:hover span{
		color: var(--purple01);
	}

	

	
	@media screen and (max-width: 1300px){
		#reg-form{
			gap: 10px;
		}

		#reg-form fieldset{
			width: 100%;
		}

		#report_list .list-cont .control_btn .dot{
			gap: 5px;
		}

		#report_list .list-cont .control_btn .dot span{
			width: 6px; height: 6px;
		}

		#report_list .list-cont{
			height: 40vh;
			margin-top: 12px;
		}

		#report_list .list-cont .list-item{
			padding: 8px 10px;
		}

		#report_list .list-cont .list-item:not(:first-of-type){
			margin-top: 15px;
		}

		#report_list .list-cont .site-score .score_chart{
			width: 100px; height: 3px;
		}

		#report_list .list-cont .site-score p{
			font-size: 0.8125rem;
		}

		#report_list .list-cont .site-score p span{
			font-size: 0.875rem;
		}

		#report_list .list-cont .list-item .site-name{
			width: 60%;
		}
		
		#report_list .list-cont .list-item .site-name .url_box{
			font-size: 0.8125rem;
		}

		#report_list .list-cont .list-item .site-name .data-nickname{
			font-size: 1.0625rem;
		}
	}


	@media screen and (max-width: 767px){
		#dashboardContent .btn_back{
			font-size: 1rem;
			gap: 10px;
		}

		#dashboardContent .btn_back i{
			font-size: 0.8125rem;
		}

		#reg-form{
			margin-top: 20px;
			padding: 20px;
		}

		#reg-form h3{
			font-size: 1rem;
		}

		#reg-form fieldset input,
		#reg-form fieldset label{
			font-size: 0.8125rem;
		}

		#reg-form fieldset input{
			padding: 10px 15px;
		}

		#reg-form fieldset input:focus ~ label,
		#reg-form fieldset input:valid ~ label{
			font-size: 0.75rem;
			left: 5px;
		}

		#reg-form .btn-reg{
			font-size: 0.9375rem;
		}

		#reg-form .btn-reg .chart_ani span{
			width: 3px;
			height: 15px;
		}

		#reg-form .btn-reg .chart_ani span:nth-child(1){
			height: 10px;
		}

		#reg-form .btn-reg .chart_ani span:nth-child(3){
			height: 6px;
		}


		@keyframes ani01{
			0%{
				height: 7px;
			}
			50%{
				height: 2px;
			}
			100%{
				height: 10px;
			}
		}

		@keyframes ani02{
			0%{
				height: 13px;
			}
			50%{
				height: 17px;
			}
			100%{
				height: 15px;
			}
		}

		@keyframes ani03{
			0%{
				height: 11px;
			}
			50%{
				height: 4px;
			}
			100%{
				height: 6px;
			}
		}

		#report_list .list_desc{
			font-size: 0.875rem;
		}
	}

	@media screen and (max-width: 320px){}





/* ====================== 

* 대시보드 리포트 뷰 페이지 *

====================== */

#dashboardContent.report{}

#dashboardContent.report > .btn-box{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	/* background-color: var(--bg-color01); */
	/*background-color: rgba(250,249,252,0.5); */
	position: fixed;
	top: 205px;
    right: 180px;
	z-index: 30;
	width: auto;
	transition: 0.4s;
	box-sizing: border-box;
	/* padding: 15px 20px; */
	backdrop-filter: blur(105px);
	border-radius: 10px;
}

#dashboardContent.report.hover > .btn-box{
	right: 210px;
}

#dashboardContent.report > .btn-box li{
	display: flex;
	gap: 5px;
}

#dashboardContent.report > .btn-box li.control a{
	display: flex;
	justify-content: center;
	align-items: center;
	box-sizing: border-box;
	padding: 10px;
	background-color: var(--purple02);
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.2s;
	min-width: 40px;
	height: 40px;
}

#dashboardContent.report > .btn-box li.control a:hover{
	background-color: var(--purple01);
}

#dashboardContent.report > .btn-box li.control a i{
	color: #fff;
}


#dashboardContent.report > .btn-box .btn_prev{
    background-color: #fff;
    width: 100%;

    /* display: inline-flex; */
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /* position: relative; */
    z-index: 98;
    /* left: 22%; */
    /* left: 0; */
    top: 0;

    font-size: 1.125rem;
    font-weight: 800;
    color: var(--purple01);

    transition: 0.4s;
}

#dashboardContent.report > .btn-box .btn_prev:hover{
}
    #dashboardContent.report > .btn-box .btn_prev *{
        color: inherit;
        font-weight: inherit;
    }


.report_tit{
    margin-top: 60px;

    width: 100%;
    display: flex;
    justify-content: center;
	/* justify-content: space-between; */
	align-items: center;
	gap: 15px;
	padding: 25px 50px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.1);
	background-color: #fff;

    background-position: center center;

	position: relative;
} 

.report_tit .txt_box{
    display: flex;
    flex-direction: row;
    align-items: center;

    font-size: 2rem;
    color: var(--purple01);
    font-weight: 800;
}

.report_tit .txt_box .data-site-name{
    color: inherit;
    font-weight: inherit;
}

.report_tit .txt_box .url_box{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}
.report_tit .txt_box .url_box em{
    display: inline-block;
    font-style: normal;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
    background-color: var(--yellow01);
    padding: 3px 5px;
    border-radius: 6px;
    line-height: 1;
}
.report_tit .txt_box .url_box .data-site-url{
    font-weight: 600;
    color: var(--purple03);
    font-size: 1rem;
}




#report_cont{
    margin-top: 65px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
	align-items: stretch; /* 모든 flex 아이템의 높이를 동일하게 */
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}


/* score와 score-distribution이 같은 줄에 배치되도록 강제 */
/* gap(20px)을 고려한 정확한 계산 - !important로 우선순위 확보 */
/* 비율을 70% / 30%로 조정하여 padding을 고려 */
#report_cont > .rpt_cont.score {
    flex: 0 1 calc((100% - 20px) * 0.70) !important; /* gap 제외 후 70% */
    min-width: 0 !important; /* min-width를 0으로 설정하여 축소 허용 */
    max-width: calc((100% - 20px) * 0.70) !important;
    width: calc((100% - 20px) * 0.70) !important; /* 명시적 width 설정 */
}

#report_cont > .rpt_cont.score-distribution {
    flex: 0 0 calc((100% - 20px) * 0.30) !important; /* gap 제외 후 30%, 고정 */
    min-width: 0 !important; /* min-width를 0으로 설정 */
    max-width: calc((100% - 20px) * 0.30) !important;
    width: calc((100% - 20px) * 0.30) !important; /* 명시적 width 설정 */
}

#report_cont .rpt_cont{
    border-radius: 15px;
    box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.1);
    box-sizing: border-box;
    padding: 20px;
	background-color: #fff;
    position: relative;
    margin-bottom: 20px; /* 각 섹션 간 간격 */
    min-width: 0; /* flex 아이템이 축소될 수 있도록 */
}
#report_cont .score{
	padding-left: 50px; 
	padding-right: 50px;
	box-sizing: border-box;
	overflow: hidden;
	min-height: 280px;
	max-height: 380px;
	height: 380px;
	/* flex와 width는 #report_cont > .rpt_cont.score에서 처리 */
}

#report_cont .score .score-box{
	height: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 60px;
	transition: 0.4s;
	min-width: 0;
	width: 100%;
	overflow: hidden;
}

.hover #report_cont .score .score-box{
	gap: 45px;
}

#report_cont .score .speedmeter-box{
	position: relative;
	width: 200px;
	height: 200px;
	flex-shrink: 0;
	/* overflow-y: hidden; */
}

#report_cont .score .speedmeter-box::before{
	content: "0";
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--text-color01);
	position: absolute;
	top: calc(50% + 12px); left: 10px;
	z-index: 3;
}

#report_cont .score .speedmeter-box::after{
	content: "100";
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--text-color01);
	position: absolute;
	top: calc(50% + 12px); right: calc( 20px / 2 );
	z-index: 3;
}


#report_cont .score .speedmeter-box .speedmeter{
	position: relative;
	top: 40%;
	transform: translateY(-40%) rotate(0deg);
	width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 40px solid var(--pink02);
    border-right: 40px solid var(--green02);
    border-bottom: 40px solid white;
    display: inline-block;
    border-top-color: var(--yellow02);
}

#report_cont .score .speedmeter-box .speedmeter::before{
	content: "";
	width: calc( 100% + 80px ); height: 50%;
	background-color: #fff;
	position: absolute;
	bottom: -10px; left: 50%;
	transform: translateX(-50%); 
}

#report_cont .score .speedmeter-box .speedmeter::after{
	content: "";
	width: 15px; height: 15px;
	background-color: var(--text-color01);
	border-radius: 50%;
	position: absolute;
	top: calc(50% + 2px); left: 50%;
	transform: translateX(-50%);
}

#report_cont .score .speedmeter-box .needle{
	display: block;
	width: 5px;
	height: 0;
	border-bottom: 30px solid var(--text-color02);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: rotate(-90deg);
	transform-origin: bottom;
	z-index: 3;
}

#report_cont .score .speedmeter-box .needle.animation{
	transition: 0.8s;
	transition-delay: 0.15s;
}

#report_cont .score .speedmeter-box .needle .circle{
	width: 15px; height: 15px;
	border-radius: 50%;
	background-color: var(--text-color02);
	position: absolute;
	top: 17px; left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: none;
}

#report_cont .score .score-txt-box{
	position: relative;
	z-index: 20;
	top: -75px;
	text-align: center;
}

#report_cont .score .score-txt-box p{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	font-size: 1.625rem;
	font-weight: 600;
}

#report_cont .score.good .score-txt-box p{
	color: var(--green01);
}

#report_cont .score.normal .score-txt-box p{
	color: var(--yellow01);
}

#report_cont .score.bad .score-txt-box p{
	color: var(--pink01);
}

#report_cont .score .score-txt-box p strong{
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.07rem;
	color: inherit;
}

#report_cont .score .score-txt-box span{
	display: inline-block;
	/* margin-top: 10px; */
	font-size: 0.875rem;
	padding: 2px 5px;
	border-radius: 3px;
}

#report_cont .score.good .score-txt-box span{
	color: var(--green01);
	background-color: var(--green04);
}

#report_cont .score.normal .score-txt-box span{
	color: var(--yellow01);
	background-color: var(--yellow04);
}

#report_cont .score.bad .score-txt-box span{
	color: var(--pink01);
	background-color: var(--pink04);
}


#report_cont .score .score-rate-box{
	width: calc( (100% - 60px) - 210px );
	min-width: 0;
	max-width: 100%;
	flex-shrink: 1;
	overflow: hidden;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#report_cont .score h3{
    font-size: 2.3125rem;
    font-weight: 800;
}

#report_cont .score h4{
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--text-color03);
}

/* site-name, site-url 텍스트 오버플로우 처리 */
#report_cont .score .score-rate-box .site-name,
#report_cont .score .score-rate-box .site-url{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
	width: 100%;
	word-break: break-all;
	box-sizing: border-box;
	display: block;
}

#report_cont .score .score_txt{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
	font-size: 2.5rem;
    font-weight: 800;

    margin-top: 40px;
}
    #report_cont .score .score_txt span{
        /* font-size: 7.5625rem; */
		font-size: 4.5rem;
		letter-spacing: -0.2rem;
        line-height: 1;
    }

#report_cont .score .score_desc{
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-color03);
    word-break: keep-all;

    margin-top: 15px;
}

#report_cont .score .score_desc span{
	color: Inherit;
	font-size: inherit;
}

#report_cont .score a{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding-bottom: 10px;
    margin-top: 30px;

    position: relative;
}
#report_cont .score a span{
    font-size: 1rem;
    font-weight: 700;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 5px;
	letter-spacing: -0.06rem;
}
#report_cont .score a i{
    font-size: 1rem;
}


#report_cont .rpt_cont.competition,
#report_cont .rpt_cont.banner{
    /* width: calc( ( 100% - 20px ) / 1.5 ); */
	width: 350px;
}

#report_cont .rpt_cont.competition h3{
	font-size: 1.25rem;
	font-weight: 700;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7px;
}

#report_cont .rpt_cont.competition h3 strong{
	font-size: inherit;
	font-weight: inherit;
}

#report_cont .rpt_cont.competition h3 strong.high{
	color: var(--pink01);
}

#report_cont .rpt_cont.competition h3 strong.middle{
	color: var(--yellow01);
}

#report_cont .rpt_cont.competition h3 strong.low{
	color: var(--green01);
}

#report_cont .rpt_cont.competition p{
	margin-top: 10px;
	line-height: 1.4;
	font-size: 0.875rem;
	color: var(--text-color02);
}

#report_cont .rpt_cont.competition .competition-list{
	margin-top: 25px;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
}

#report_cont .rpt_cont.competition .competition-list .list-item{}

#report_cont .rpt_cont.competition .competition-list .keyword-name{
	min-width: 20%;
}

#report_cont .rpt_cont.competition .competition-list .click-count,
#report_cont .rpt_cont.competition .competition-list .click-proportion{
	width: 100%;
}

#report_cont .rpt_cont.competition .competition-list .list-item dl{}

#report_cont .rpt_cont.competition .competition-list .list-item dl dt{
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--text-color03);
}

#report_cont .rpt_cont.competition .competition-list .list-item dl dd{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-color02);
}

#report_cont .rpt_cont.competition .competition-list .list-item dl dd .mini-box{
	margin-top: 5px;
}

#report_cont .rpt_cont.competition .competition-list .list-item dl dd .mini-title{
	text-transform: uppercase;
	color: var(--purple01);
	background-color: var(--purple05);
	font-size: 0.75rem;
	font-weight: inherit;
	padding: 2px 5px;
	border-radius: 3px;
}

#report_cont .rpt_cont.competition .competition-list .list-item dl dd .mini-text{}

#report_cont .rpt_cont.competition .competition-list .list-item dl dd .mini-text em{
	font-style: normal;
	font-size: 0.875rem;
	font-weight: 500;
}

#report_cont .rpt_cont.banner{
	padding: 0;
	overflow: hidden;
}

#report_cont .rpt_cont.banner a{
	display: block;
}

#report_cont .rpt_cont.banner a img{
	width: 100%;
}

#report_cont .score_chart{
    
}
#report_cont .score_chart h3{
    font-size: 1.375rem;
    font-weight: 800;
    color: var(--purple01);
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--gray01);
    margin-bottom: 25px;
}

#mychart{
	height: 200px !important;
}



#report_cont .tech_box{
    width: 100%;
}
#report_cont .tech_box_tit{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    /* padding-bottom: 25px; */

    cursor: pointer;
}
#report_cont .tech_box_tit h3{
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--text-color03);
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 7px;
    transition: 0.4s;
}

#report_cont .tech_box_tit h3:hover{
	color: var(--text-color02);
}

#report_cont .tech_box_tit.open h3{
	/* color: var(--purple01); */
}

#report_cont .tech_box_tit h3 i{
	font-size: 1.375rem;
	color: inherit;
}



#report_cont .tech_box_prev{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

#report_cont .tech_box_prev p{
    font-size: 0.875rem;
    color: var(--text-color03);
	font-weight: 300;
}

#report_cont .tech_box_prev span{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    padding: 5px 12px;
    border-radius: 5px;
    border: 1px solid var(--purple01);

    background-color: var(--bg-color01);
}

#report_cont .tech_box_prev span em{
    font-style: normal;
    color: var(--purple01);
    font-size: 0.8125rem;
	font-weight: 500;
}

#report_cont .tech_box_prev i{
    font-size: 0.7125rem;
    color: var(--purple01);

    /* transition: 0.4s; */
}
    #report_cont .tech_box_tit.open .tech_box_prev i{
        transform: rotate(180deg);
    }

#report_cont .tech_box .tech_box_desc{
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--gray01);
}

#report_cont .tech_box .tech_box_desc p{
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-color02);
}

#report_cont .tech_box_desc .code-box{
	margin-top: 10px;
}

#report_cont .tech_box_desc .code-box li{
	position: relative;
	min-height: 50px;
}

#report_cont .tech_box_desc .code-box li::after{
	content: "";
	width: 7px;
	height: calc( 100% - 20px );
	background-color: #999ea9;
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	
	display: flex;
	justify-content: center;
	/* align-items: center; */
	align-items: flex-start;
	/* line-height: 50px; */
	position: absolute;
	top: 0; left: 0;
}

#report_cont .tech_box_desc .code-box pre{
	height: 100%;
}

#report_cont .tech_box_desc .code-box pre code.hljs{
    padding: 0;
	height: 100%;
    line-height: calc( (50px / 2 ) - 20px );
    overflow: hidden;
	box-sizing: border-box;
	padding: 10px 15px;
	/* padding-left: 50px; */
	padding-left: 25px;
}



#report_cont .tech_box_question{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 5px;
	margin-top: 25px;
}

#report_cont .tech_box_desc .tech_box_question i{
    color: var(--pink02);
    font-size: 1.25rem;
}

#report_cont .tech_box_desc .tech_box_question p{
    word-break: keep-all;
    color: var(--text-color03);
    font-size: 0.875rem;
    font-weight: 400;
}

/* 점수 분포 섹션 */
#report_cont .rpt_cont.score-distribution{
    /* width, flex는 위의 선택자에서 처리 */
    flex-shrink: 0; /* 축소 방지 */
    flex-grow: 0; /* 확대 방지 */
    margin-bottom: 20px; /* 하단 간격 */
    /* score와 동일한 높이 설정 */
    min-height: 280px;
    max-height: 380px;
    height: 380px;
    box-sizing: border-box;
    overflow: hidden;
}

#report_cont .score-distribution h3{
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
}

#report_cont .score-distribution .distribution-list{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#report_cont .score-distribution .distribution-item{
    width: 100%;
}

#report_cont .score-distribution .distribution-item dl{
    margin: 0;
}

#report_cont .score-distribution .distribution-item dt{
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-color03);
    margin-bottom: 8px;
}

#report_cont .score-distribution .distribution-item dd{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin: 0;
}

#report_cont .score-distribution .distribution-bar{
    flex: 1;
    height: 24px;
    background-color: var(--gray01);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

#report_cont .score-distribution .distribution-fill{
    height: 100%;
    background: linear-gradient(90deg, var(--green01) 0%, var(--green02) 100%);
    border-radius: 12px;
    transition: width 0.8s ease;
    min-width: 0;
}

#report_cont .score-distribution .distribution-value{
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 50px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-color02);
}

#report_cont .score-distribution .distribution-value .distribution-score{
    font-weight: 700;
    color: var(--green01);
}

#report_cont .score-distribution .distribution-value .distribution-max{
    font-size: 0.875rem;
    color: var(--text-color03);
    font-weight: 500;
}

/* AI 분석 결과 섹션 */
#report_cont .rpt_cont.ai-analysis{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, rgba(106, 0, 227, 0.03) 0%, rgba(106, 0, 227, 0.01) 100%);
    border: 2px solid rgba(106, 0, 227, 0.1);
}

#report_cont .rpt_cont.ai-analysis .ai-analysis-title{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--purple01);
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(106, 0, 227, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
}

#report_cont .rpt_cont.ai-analysis .ai-analysis-title i{
    font-size: 1.375rem;
    color: var(--purple01);
}

#report_cont .rpt_cont.ai-analysis .ai-analysis-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#report_cont .rpt_cont.ai-analysis .ai-summary-box,
#report_cont .rpt_cont.ai-analysis .ai-opinion-box{
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-left: 4px solid var(--purple01);
}

#report_cont .rpt_cont.ai-analysis .ai-box-title{
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--purple01);
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#report_cont .rpt_cont.ai-analysis .ai-box-title i{
    font-size: 1rem;
    color: var(--purple02);
}

#report_cont .rpt_cont.ai-analysis .ai-summary-text,
#report_cont .rpt_cont.ai-analysis .ai-opinion-text{
    font-size: 0.9375rem;
    line-height: 1.8;
    color: var(--text-color02);
    white-space: pre-wrap;
    word-break: keep-all;
}

#report_cont .rpt_cont.ai-analysis .ai-opinion-box{
    border-left-color: var(--green01);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.02) 0%, #fff 100%);
}

#report_cont .rpt_cont.ai-analysis .ai-opinion-box .ai-box-title{
    color: var(--green01);
}

#report_cont .rpt_cont.ai-analysis .ai-opinion-box .ai-box-title i{
    color: var(--green02);
}



/* 성능/보안 섹션 */
#report_cont .rpt_cont.performance-section,
#report_cont .rpt_cont.security-section{
    width: 100%;
    margin-top: 30px;
    margin-bottom: 20px;
}

#report_cont .rpt_cont.performance-section h2,
#report_cont .rpt_cont.security-section h2{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    padding: 20px;
    background: linear-gradient(135deg, var(--purple05) 0%, rgba(106, 0, 227, 0.05) 100%);
    border-radius: 15px;
    color: var(--purple01);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

#report_cont .rpt_cont.performance-section h2 i,
#report_cont .rpt_cont.security-section h2 i{
    font-size: 1.375rem;
}

/* URL 입력 섹션 */
.url-input-section{
    background: #fff;
    padding: 30px;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0px 0px 10px rgba(106, 0, 227, 0.1);
    box-sizing: border-box;
}

.url-input-section > div:first-child{
    display: flex;
    gap: 10px;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
}

.url-input-section #urlInput{
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--gray01);
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
}

.url-input-section #urlInput:focus{
    border-color: var(--purple01);
}

.url-input-section button{
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-family: inherit;
}

.url-input-section #analyzeBtn{
    background-color: var(--purple01);
    color: #fff;
}

.url-input-section #analyzeBtn:hover{
    background-color: var(--purple02);
}

.url-input-section #analyzeBtn:disabled{
    background-color: var(--gray01);
    cursor: not-allowed;
}

.url-input-section #expandAllBtn,
.url-input-section button[onclick="printPage()"]{
    background-color: var(--bg-color01);
    color: var(--text-color02);
    border: 1px solid var(--gray01);
}

.url-input-section #expandAllBtn:hover,
.url-input-section button[onclick="printPage()"]:hover{
    background-color: var(--gray01);
}

.url-input-section #loadingSection{
    text-align: center;
    padding: 20px;
    margin-top: 20px;
}

.url-input-section #loadingSection > div{
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--gray01);
    border-top: 4px solid var(--purple01);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin{
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}








@media print{
	body{
		background-color: var(--bg-color01) !important; 
        -webkit-print-color-adjust:exact;
	}

	#header{
		display: none;
	}

	.report_tit{
		margin-top: 0;
	}

	.report_tit .btn-box{
		display: none;
	}
	
	#dashboardContent{
		width: 100% !important;
		margin-left: 0 !important;
		padding-top: 0;
	}

	#dashboardContent .btn_back{
		display: none;
	}

	
}