:root{
	--backgr	: #f5f5f5					;
	--fontcl	: #002562					;
	--fontpt 	: #040f21					;
	--thema 	: #A7CDEF					;
	--thema 	: #c4ddf4					;
	--width		: 92%							;
}


/* 폰트 적용 */
html,
header,
body {
    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											;

    margin								: 0						;
    padding								: 0						;
    background-color			: var(--backgr);
}

/* 마우스 있는 기기 = PC */
@media (hover: hover) {
  body {
    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											;

    margin								: 0						;
    padding								: 0						;
    background-color			: black				;
  }
}


/*--------- index.php CSS --------------*/
#empty_space {
    height							: 1cqh						;
}
#empty_mini {
    height							: 0.5cqh					;
}

#user_body {
  background-color			: var(--backgr)				;
  margin								: auto								;
	overflow							: auto								;
  aspect-ratio					: 9 / 16							;
  width									: min(100vw, 56.25vh)	; /* 비율 유지 */
  max-height						: 100vh								;
	container-type				: size								;
	-ms-overflow-style		: none								;
  scrollbar-width				: none								;
} 

#login_body {
  background-image			: url('../img/flanet/UI/login_background.png'); 
  background-size				: 100% auto						;
  background-attachment	: contain							;
  background-position		: top   							;
  background-repeat			: no-repeat						;

  background-color			: var(--backgr)				;
  margin								: auto								;
	overflow							: auto								;
  aspect-ratio					: 9 / 16							;
  width									: min(100vw, 56.25vh)	; /* 비율 유지 */
  max-height						: 100vh								;
	container-type				: size								;
	-ms-overflow-style		: none								;
  scrollbar-width				: none								;
} 

#login_header {	
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start   		;
	margin								: auto						;
	height								: 6.5%					  ;	
	width									: var(--width)		;	
	background-color			: var(--thema)		;		
	border-radius					: 0.6cqh					;	
	color									: var(--fontpt)		;
	opacity: 1;
}	

#user_name {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start    	;
	height								: 100%						;	
	width									: 20%				    	;	
  margin-left						: 4%					  	;	
	color									: var(--fontpt)		;
	font-weight						: bold						;
	font-size							: 1.8cqh					;	
}

#login_header input {
	display								: none						;
}

#login_header label {
	display								: flex						;
  align-items						: center					;
  justify-content				: center        	;
	height								: 75%							;	
	width									: 20%				    	;	
	color									: var(--fontpt)		;
	font-weight						: bold						;
	font-size							: 1.8cqh					;	
  cursor								: pointer					;
  border-radius					: 1cqh						;
  transition						: 0.2s						;
}

#login_header label:hover {
  background: rgba(255,255,255,0.2);
}
#login_header input:checked + label {
  background						: white						;
	color									: var(--fontpt)		;
	font-weight						: bold						;
  box-shadow: 0 2px 6px rgba(0,0,0,0.20)	;
}


#login_box {
	height								: 50%						  ;
	width									: 86.2%					  ;
	margin     						: auto						;
}

#login_box form {
	height								: 55%							;
}

#login_title {
	display								: flex						;
  align-items						: center					;
  justify-content				: center        	;
	height								: 18%							;	
	width									: 100%			    	;	
	color									: black						;
	font-size							: 4.5cqh			  	;
	font-weight						: bold   					;

}

#login_name {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start     	;
	height								: 12%  					  ;
	width									: 80%							;
	margin     						: auto						;
	border-radius					: 2cqh						;
}

.login_css {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start     	;
	width									: 100%			  		;
	height								: 25%  					  ;
	box-sizing						: border-box			;
	background-color			: var(--backgr)		;
	border								: none						;
	border-radius					: 0.8cqh				  ;
	margin								: auto						;
	box-shadow: 0 2px 6px rgba(0,0,0,0.10)	;
	color									: var(--fontcl)		;
	font-size							: 1.6cqh					;
	text-indent						: 3%							;
}

#login_btn {
	display								: flex						;
  align-items						: center					;
  justify-content				: center     			;
	width									: 100%			  		;
	height								: 20%  					  ;
	box-sizing						: border-box			;
	background-color			: var(--backgr)		;
	border								: none						;
	border-radius					: 0.8cqh				  ;
	margin								: auto						;

	color									: var(--fontcl)		;
	font-size							: 2.3cqh					;
	font-weight						: bold						;
}

#register_btn {
	display								: flex						;
  align-items						: center					;
  justify-content				: center     			;
	width									: 100%			  		;
	height								: 8%  					  ;
	box-sizing						: border-box			;
	background-color			: var(--backgr)		;
	border								: none						;
	border-radius					: 0.8cqh				  ;
	margin								: auto						;
	color									: var(--fontcl)		;
	font-size							: 1.6cqh					;
	font-weight						: bold						;
}
#find_pwd_btn {
	display								: flex						;
  align-items						: center					;
  justify-content				: center     			;
	width									: 100%			  		;
	height								: 8%  					  ;
	box-sizing						: border-box			;
	background-color			: var(--backgr)		;
	border								: none						;
	border-radius					: 0.8cqh				  ;
	margin								: auto						;
	color									: var(--fontcl)		;
	font-size							: 1.6cqh					;
	font-weight						: bold						;
}

#login_notice {
	width									: 88%				  		;
	height								: 8%  					  ;
	margin								: auto						;
	color									: black  					;
	font-size							: 1.8cqh					;
	font-weight						: normal						;
}

#login_logo {
  background-image			: url('../img/flanet/flanet_logo.png'); 
  background-size				: auto 100%				;
  background-attachment	: contain					;
  background-position		: center					;
  background-repeat			: no-repeat				;

	display								: flex						;
  align-items						: center					;
  justify-content				: center     			;
	width									: 80%				  		;
	height								: 12%  					  ;
  margin								: auto						;

}

/*--------- Register CSS --------------*/
#register_box {
	height								: 80%						  ;
	width									: 88.2%						;
	margin     						: auto						;
  background-color			: var(--backgr)		;
	border-radius					: 2cqh						;
	box-shadow: 0 2px 8px rgba(0,0,0,0.16)	;
}
#register_box form {
	height								: 100%					 	;
	width									: 100%						;
}

#register_title {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start     	;
	height								: 9%							;	
	width									: 88%			    		;	
	margin-left						: 6%							;
	color									: black						;
	font-size							: 3.0cqh			  	;
	font-weight						: bold   					;

}


.register_blank {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start     	;
	width									: 88%				  		;
	height								: 8%  					  ;
	box-sizing						: border-box			;
	background-color			: #FAFAFA					;
	border								:	none						;
	border-radius					: 0.8cqh				  ;
	box-shadow: 0 2px 6px rgba(0,0,0,0.10)	;
	margin								: auto						;

	color									: 8888888					;
	font-size							: 2cqh						;
	text-indent						: 3%							;
}


.register_info {
  height								: 1cqh						;
	width									: 88%							;
	margin-left						: 6%							;
	font-size							: 2cqh						;
	color									: var(--fontcl)		;
}

#certi_btn {
	display								: flex						;
  align-items						: center					;
  justify-content				: center     			;
	width									: 80%				  		;
	height								: 8%  					  ;
	box-sizing						: border-box			;
	background-color			: #222222 				;		
	border								:	0.2cqh solid		;
	border-radius					: 0.8cqh				  ;
	margin								: auto						;

	color									: white  					;
	font-size							: 2.5cqh					;
	font-weight						: bold						;
}

#confirm_btn {
	display								: flex						;
  align-items						: center					;
  justify-content				: center     			;
	width									: 100%			  		;
	height								: 10%  					  ;
	box-sizing						: border-box			;
	background-color			: var(--backgr)		;
	border								: none						;
	border-radius					: 0.8cqh				  ;
	margin								: auto						;

	color									: var(--fontcl)		;
	font-size							: 2.3cqh					;
	font-weight						: bold						;
}


/*--------- Course CSS --------------*/

#course_title_line {
  background-image			: url('../img/flanet/UI/cource_notice.png'); 
  background-size				: auto 100%				;
  background-attachment	: contain					;
  background-position		: center					;
  background-repeat			: no-repeat				;

	display								: flex						;
  align-items						: center					;
  justify-content				: center    			;
	height								: 6%						  ;	
	width									: var(--width)		;	
  margin								: auto					  ;	
}
#course_title_text 			{
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start    	;
	width									: 35%							;
  height								: 100%						;
}
#course_notice 			{
	display								: flex						;
  align-items						: flex-start			;
  justify-content				: flex-start    	;
	width									: 65%							;
  height								: 100%						;
	color									: red						  ;
	font-weight						: normal					;
	font-size							: 1.7cqh					;	
}


#class_filter_wrap {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start    	;
	height								: 5%						  ;	
	width									: 94%						;	
	margin-left						: 4%							;
	color									: var(--fontcl)		;
	font-weight						: bold						;
	font-size							: 2.5cqh					;	
}

.css_filter_select {
	height								: 100%						;	
	width									: 48%				    	;	
	color									: var(--fontcl)		;
  background-color			: var(--backgr)		;
	font-weight						: bold						;
	font-size							: 2.0cqh					;	
	border 								: 0.2cqh solid 		;
	border-radius					: 1cqh						;
	border-color					: var(--fontcl)		;
	margin-right					: 2%							;
}
#class_filter_btn {
	height								: 100%						;	
	width									: 30%				    	;	
	margin-left						: 3%							;
	color									:	white  					;
  background-color			: #006ddc					;
	font-weight						: bold						;
	font-size							: 2.2cqh					;	
	border-radius					: 1cqh						;
	border 								: 0.2cqh solid #006ddc;
}

#course_box {
	height								: 70%						  ;
	width									: 93%							;	
	margin     						: auto						;
	overflow							: auto						;
	-ms-overflow-style		: none						;
  scrollbar-width				: none						;
}

.course_wrap {
  background-image			: url('../img/flanet/UI/class_box_v2.png'); 
  background-size				: 100% auto				;
  background-attachment	: contain					;
  background-position		: top							;
  background-repeat			: no-repeat				;

	height								: 34%						  ;
	width									: 98%							;
	margin     						: auto						;
	margin-top						: 1%							;
	border-radius					: 1.4cqh					;
	box-shadow: 1px 2px 2px 1.0px rgba(0, 0, 0, 0.10); 
}

.course_name {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	height								: 24%						  ;
	width								  : 97%			      	;
	margin-left						: 3%							;

	color									: var(--fontpt)		;
	font-weight						: bold						;
	font-size							: 2.0cqh					;	
}

.course_split  {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	width								  : 100%			      ;
	height								: 73%						  ;
	margin-top						: 1%							;
}

.course_info_box  {
	height								: 100%					  ;
	width								  : 60%				      ;
	margin-left						: 3%							;
}

.course_info_line {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	width								  : 100%			     	;
	height								: 14.0%					  ;
}
.course_info_title {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	height								: 100%					  ;
	width								  : 30%				      ;
	color									: var(--fontpt)		;
	font-weight						: normal					;
	font-size							: 1.8cqh					;	
}
.course_info {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	height								: 100%					  ;
	width								  : 80%				      ;
	color									: var(--fontpt)		;
	font-weight						: normal					;
	font-size							: 1.8cqh					;	
	font-feature-settings	: "tnum"					;
}


.course_btn_box {
	height								: 100%				    ;
	width								  : 30%				      ;
	margin								: auto						;
}
.course_regist_btn {
  background-image			: url('../img/flanet/UI/class_btn.png'); 
  background-size				: auto	100% 			;
  background-attachment	: contain					;
  background-position		: top							;
  background-repeat			: no-repeat				;
	background-color			: var(--backgr)		;

	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start   		;
	height								: 25%					    ;
	width								  : 100%			      ;
	margin								: auto						;
	border								: none						;
	border-radius					: 0px							;
}
.course_curri_btn {
  background-image			: url('../img/flanet/UI/curri_btn.png'); 
  background-size				: 100%	auto			;
  background-attachment	: contain					;
  background-position		: top							;
  background-repeat			: no-repeat				;
	background-color			: var(--backgr)		;

	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start   		;
	height								: 25%					    ;
	width								  : 100%			      ;
	margin								: auto						;
	border								: none						;
	border-radius					: 0px							;
}

.course_cencel_btn {
  background-image			: url('../img/flanet/UI/cancel_btn.png'); 
  background-size				: 100%	auto			;
  background-attachment	: contain					;
  background-position		: top							;
  background-repeat			: no-repeat				;
	background-color			: var(--backgr)		;

	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start   		;
	height								: 25.0%				    ;
	width								  : 100%			      ;
	margin								: auto						;
	border								: none						;
	border-radius					: 0px							;
}

.course_confirm {
  background-image			: url('../img/flanet/UI/cplt_btn.png'); 
  background-size				: 100%	auto			;
  background-attachment	: contain					;
  background-position		: top							;
  background-repeat			: no-repeat				;
	background-color			: var(--backgr)		;

	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start   		;
	height								: 26.0%				    ;
	width								  : 100%			      ;
	margin								: auto						;
	border								: none						;
	border-radius					: 0px							;
}

/*커리큘럼 모달 */
#modal_wrapper {
	position							: fixed;
  inset									: 0							;
  display								: grid					;
  justify-items					: center				;
  align-items						: start					;
  aspect-ratio					: 9 / 16							;
  width									: min(100vw, 56.25vh)	; /* 비율 유지 */
  max-height						: 100vh								;
	margin								: auto					;
	margin-top						: 0%						;
}

/*
#curri_modal {
		position							: relative			;
    background-color			: var(--backgr)	;
    border								: none					;
    border-radius					: 0.8cqh				;
    z-index								: 9999					;
    overflow							: auto					;
		width 								: 93dvw					;
    height:min(92vh, calc(93vw * 16 / 9));
    max-width							: 92vw					;
    box-sizing						: border-box		;
    container-type				: size					;
    -ms-overflow-style		: none					;
    scrollbar-width				: none					;
		box-shadow: 0 2px 5px 1.5px rgba(0, 0, 0, 0.2);
}
*/
#curri_modal {
		position							: relative			;
    background-color			: var(--backgr)	;
    border								: none					;
    border-radius					: 0.8cqh				;
    z-index								: 9999					;
    overflow							: auto					;
	/*height 								: 97dvh					;*/
		width									: 92%						;
		aspect-ratio					: 9/16					;
    box-sizing						: border-box		;
    container-type				: size					;
    -ms-overflow-style		: none					;
    scrollbar-width				: none					;
		box-shadow: 0 2px 5px 1.5px rgba(0, 0, 0, 0.2);
}

#modal_cancel {
	position								: absolute				;
  left										: 89.4%						;
	top											: 0.8%						;
  height									: 5cqh					  ;
  width										: 9%	  					;
	background-color				: white						;
  font-size								: 3.0cqh					;
	font-weight							: bold						;
	color										: black						;
	border-radius						: 0.9cqh					;
	background-color				: white						;
}
#modal_img_wrap {
  background-size					: 100% auto				;
  background-attachment		: contain					;
  background-position			: center					;
  background-repeat				: no-repeat				;
  width										: 100%	  				;
  height									: 78cqh					  ;
}

#course_notice_line {
  background-image			: url('../img/flanet/UI/cource_notice.png'); 
  background-size				: 100% auto				;
  background-attachment	: contain					;
  background-position		: center					;
  background-repeat			: no-repeat				;

	display								: flex						;
  align-items						: center					;
  justify-content				: center    			;
	height								: 10%						  ;	
	width									: 100%			    	;	
  margin								: auto					  ;	
}


/*--------- My Page CSS --------------*/
#my_course_box {
	height								: 70%						  ;
	width									: 90%							;
	margin     						: auto						;
	overflow							: auto						;
	-ms-overflow-style		: none						;
  scrollbar-width				: none						;
}
.my_course_wrap {
	height								: 30%						  ;
	width									: 98%							;
	margin     						: auto						;
	margin-top						: 1%							;
	border-radius					: 2cqh						;
	box-shadow: 0 2px 5px 1.5px rgba(0, 0, 0, 0.2); /* 파란색 네온 느낌 */
}

#price_sum_box {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-end     		;
	height								: 6%					    ;
	width								  : var(--width)		;
	margin								: auto						;
  font-size							: 2.0cqh					;
  font-weight						: bold						;
	margin-left						: 2%							;
	color									: var(--fontcl )	;
}
#price_info_txt {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start      ;
	height								: 100%				    ;
	width								  : 22%				      ;
}



/*--------- Time Table CSS --------------*/
.timetable {
  display								: grid						;
  background						: white						;
  height								: 86%							;
  width									: 92%							;
	margin-left						: 4%							;
  grid-template-columns	: 8cqh repeat(7, 1fr);
  grid-auto-rows				: 1fr							;
  font-size							: 1.6cqh					;
  border-radius					: 1cqh						;
  overflow							: auto						;
	-ms-overflow-style		: none						;
  scrollbar-width				: none						;
}

.time_header {
	display								: flex						;
  align-items						: center					;
  justify-content				: center      		;
  background						: #f2f2f2					;
  background						: var(--thema)		;
  color									: black						;
  text-align						: center					;
  font-weight						: bold;
}

.grid_time {
	display								: flex						;
  align-items						: center					;
  justify-content				: center      		;
  background						: #f2f2f2					;
  background						: var(--thema)		;
  border								: 0.8px solid #eee;
  font-size							: 1.6cqh					;
  font-weight						: bold						;
}

/*
수업 칸 
.grid_cell {
	display								: flex						;
  align-items						: center					;
  justify-content				: center      		;
  border								: 0.8px solid #eee;
  text-align						: center					;
  font-size							: 1.5cqh					;
}
*/

/*
수업 블록 
.grid_cell:not(:empty) {
  background						: #4a90ff					;
  color									: white						;
  border-radius					: 0.5cqh					;
  font-size							: 1.5cqh					;
  font-weight						: bold						;
  box-shadow  : 0 2px 6px rgba(0,0,0,0.25);
}
*/

.grid_cell {
    display						: flex							;
    align-items				: center						;
    justify-content		: center						;
  /*border-left				: 0.8px solid #eee	;*/
    border-right			: 1.0px solid #eee	;
    border-top				: none							;
    border-bottom			: none							;
    text-align				: center						;
    font-size					: 1.2cqh						;
}
.grid_cell:not(:empty) {
  background						: #4a90ff					;
  color									: white						;
  border-radius					: 0.5cqh					;
  font-size							: 1.2cqh					;
  font-weight						: bold						;
  box-shadow  : 0 2px 6px rgba(0,0,0,0.25);
}
.grid_cell.hour_line {
    border-top: 1.0px solid #eee;
}


/*--------- Admin CSS --------------*/
#static_user {
	height								: 4%						  ;
	width									: 90%							;
	margin								: auto						;
	font-size							: 2.0cqh					;
	font-weight						: bold  					;
}
.admin_course_name {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	height								: 30%						  ;
	width								  : 95%				      ;
	margin-top						: 1%							;
	margin-left						: 3%							;
	color									: black						;
	font-weight						: bold						;
	font-size							: 2.4cqh					;	
}
.admin_course_split  {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	height								: 62%						  ;
	width								  : 100%			      ;
}

#admin_log_box {
	height								: 60%						  ;
	width									: 90%							;
	margin     						: auto						;
	overflow							: auto						;
	-ms-overflow-style		: none						;
  scrollbar-width				: none						;
}
#admin_filter_wrap {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start 			;
	height								: 6%						  ;	
	width									: 90%				    	;	
	margin-left						: 5%							;
	color									: black						;
	font-weight						: bold						;
	font-size							: 2.5cqh					;	
}
.admin_user_search {
	height								: 100%						;	
	width									: 31%				    	;	
	margin-right					: 3%							;
	color									:	#888888					;
  background-color			: #FFFFFF					;
	font-weight						: bold						;
	font-size							: 2.0cqh					;	
	border-radius					: 1cqh						;
	border 								: 0.2cqh solid #666666;
	box-sizing						: border-box			;
}
#admin_filter_btn {
	height								: 100%						;	
	width									: 30%				    	;	
	color									:	white  					;
  background-color			: #006ddc					;
	font-weight						: bold						;
	font-size							: 2.2cqh					;	
	border-radius					: 1cqh						;
	border 								: 0.2cqh solid #006ddc;
}
#admin_filter_course {
	height								: 100%						;	
	width									: 98%				    	;	
	color									:	#888888					;
  background-color			: #FFFFFF					;
	font-weight						: bold						;
	font-size							: 2.0cqh					;	
	border-radius					: 1cqh						;
	border 								: 0.2cqh solid #666666;
}

#admin_log_title {
	height								: 5%						  ;
	width									: 90%							;
	margin     						: auto						;
}
.admin_log_wrap {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start 			;
	height								: 10%						  ;	
	width									: 97%				    	;	
	color									: black						;
	font-weight						: bold						;
	font-size							: 2.0cqh					;	
	border 								: 0.2cqh solid #666666;
	border-radius					: 1cqh						;
}
.admin_log_name	{
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start 			;
	height								: 100%					  ;	
	width									: 18%				    	;	
	margin-left						: 3%							;
}
.admin_log_prof	{
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start 			;
	height								: 100%					  ;	
	width									: 26%				    	;	
	margin-left						: 3%							;
}
.admin_log_class	{
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start 			;
	height								: 100%					  ;	
	width									: 50%				    	;	
}

.user_info_wrap {
	height								: 20%						  ;
	width									: 98%							;
	margin     						: auto						;
	margin-top						: 1%							;
	border-radius					: 2cqh						;
	box-shadow: 0 2px 5px 1.5px rgba(0, 0, 0, 0.2); /* 파란색 네온 느낌 */
}
.user_log_name {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	height								: 32%						  ;
	width								  : 95%				      ;
	margin-top						: 1%							;
	margin-left						: 3%							;
	color									: black						;
	font-weight						: bold						;
	font-size							: 2.4cqh					;	
}

.user_log_split  {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	height								: 66%						  ;
	width								  : 100%			      ;
}

.user_info_box  {
	height								: 100%					  ;
	width								  : 70%			      	;
	margin-left						: 3%							;
}
.user_course_box  {
	height								: 100%					  ;
	width								  : 30%			      	;
	margin								: auto						;
}

.user_info_line {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-left    		;
	height								: 40%						  ;
	width								  : 100%			     	;
	color									: black						;
	font-weight						: normal					;
	font-size							: 2.2cqh					;	
}
.user_info_name {
	height								: 100%					  ;
	width								  : 30%			   	  	;
}
.user_info_content {
	height								: 100%					  ;
	width								  : 70%			   	  	;
}
#user_course_btn  {
	display								: flex						;
  align-items						: center					;
  justify-content				: center    			;
	height								: 45%						  ;
	width								  : 70%			      	;
	margin								: auto						;
	background-color			: #006ddc					;		
	color									: white						;
	font-weight						: bold  					;
	font-size							: 2.0cqh					;	
}


/* 모달 */
#user_class_modal {
	position								: absolute				;
	top											: 58%							;
  left										: 50%							;
  transform								: translate(-50%,-50%);
	background-color				: white						;
	border 									: 0.2cqh solid white;	
	border-radius						: 0.9cqh					;
	z-index									: 9999						;
	overflow								: auto						;

  aspect-ratio						: 9 / 16							;
  width										: min(90vw, 52.25vh)	; /* 비율 유지 */
  max-height							: 90vh								;
	container-type					: size								;
	-ms-overflow-style			: none								;
  scrollbar-width					: none								;
}

#user_table_modal {
	position								: absolute				;
	top											: 58%							;
  left										: 50%							;
  transform								: translate(-50%,-50%);
	background-color				: white						;
	border 									: 0.2cqh solid white;	
	border-radius						: 0.9cqh					;
	z-index									: 9999						;
	overflow								: auto						;

  aspect-ratio						: 9 / 16							;
  width										: min(90vw, 52.25vh)	; /* 비율 유지 */
  max-height							: 92vh								;
	container-type					: size								;
	-ms-overflow-style			: none								;
  scrollbar-width					: none								;
}

#notice_add_modal {
	position								: absolute				;
	top											: 32%							;
  left										: 50%							;
  transform								: translate(-50%,-50%);
	background-color				: white						;
	border 									: 0.2cqh solid gray;	
	border-radius						: 0.9cqh					;
	z-index									: 9999						;
	overflow								: auto						;

  aspect-ratio						: 16 / 12							;
  height									: min(72.25vw, 90vh)	; /* 비율 유지 */
  max-width	  						: 90vw								;
	container-type					: size								;
	-ms-overflow-style			: none								;
  scrollbar-width					: none								;
}

#notice_modal_line {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start 			;
	height								: 15%						  ;	
	width									: 90%				    	;	
	margin-left						: 5%							;
	color									: black						;
	font-weight						: bold						;
	font-size							: 4.5cqh					;	
}
#notice_header {
	height								: 100%						;	
	width									: 100%			    	;	
	margin-right					: 0%							;
	color									:	#888888					;
  background-color			: #FFFFFF					;
	font-weight						: bold						;
	font-size							: 5.0cqh					;	
	border-radius					: 2cqh						;
	border 								: 0.6cqh solid #666666;
	box-sizing						: border-box			;
}

#notice_modal_content {
	display								: flex						;
  align-items						: center					;
  justify-content				: flex-start 			;
	height								: 60%						  ;	
	width									: 90%				    	;	
	margin-left						: 5%							;
	color									: black						;
	font-weight						: bold						;
	font-size							: 4.5cqh					;	
}
#notice_content {
	height								: 100%						;	
	width									: 100%			    	;	
	margin-right					: 0%							;
	color									:	#888888					;
  background-color			: #FFFFFF					;
	font-weight						: bold						;
	font-size							: 5.0cqh					;	
	border-radius					: 2cqh						;
	border 								: 0.6cqh solid #666666;
	box-sizing						: border-box			;
}
.notice_reg_btn {
	display								: flex						;
  align-items						: center					;
  justify-content				: center      		;
	height								: 85%				    ;
	width								  : 40%				      ;
	margin								: auto						;
	color									: white						;
	font-weight						: bold						;
	font-size							: 5.0cqh					;	
	border								: none						;
	border-radius					: 0.9cqh					;
	background-color			: #34AE4E					;		
}
.notice_can_btn {
	display								: flex						;
  align-items						: center					;
  justify-content				: center      		;
	height								: 85%				    ;
	width								  : 40%				      ;
	margin								: auto						;
	color									: white						;
	font-weight						: bold						;
	font-size							: 5.0cqh					;	
	border								: none						;
	border-radius					: 0.9cqh					;
	background-color			: #666666					;		
}

#notice_cancel_modal {
	position								: absolute				;
	top											: 51%							;
  left										: 50%							;
  transform								: translate(-50%,-50%);
	background-color				: white						;
	border 									: 0.2cqh solid gray;	
	border-radius						: 0.9cqh					;
	z-index									: 9999						;
	overflow								: auto						;

  aspect-ratio						: 9 / 14							;
  width										: min(90vw, 58.00vh)	; /* 비율 유지 */
  max-height							: 70vh								;
	container-type					: size								;
	-ms-overflow-style			: none								;
  scrollbar-width					: none								;
}