body { opacity: 0 ;	transition: opacity 0.4s ease-in-out; }
body.visible { opacity: 1; }

.icon_sns{width:30px;height:30px;}
.icon_ci{width:70px;height:70px;}
.icon_input{width:30px;height:30px;}

.icon-menu { 
	width: 40px; height: 40px; background-color: currentcolor; mask: url('/img/svg/icon_menu.svg') no-repeat center;
	mask-size: contain; -webkit-mask: url('/img/svg/icon_menu.svg') no-repeat center; -webkit-mask-size: contain; flex-shrink: 0;}
.icon-side { 
	width: 20px; height: 20px; background-color: currentcolor; mask: url('/img/svg/icon_menu.svg') no-repeat center;
	mask-size: contain; -webkit-mask: url('/img/svg/icon_menu.svg') no-repeat center; -webkit-mask-size: contain; flex-shrink: 0;}

.icon { background-color: currentColor; mask-repeat: no-repeat; mask-position: center;
	mask-size: 60% 60%;	-webkit-mask-repeat: no-repeat;	-webkit-mask-position: center;-webkit-mask-size: 60% 60%; }
.icon_f { background-color: currentColor; mask-repeat: no-repeat; mask-position: center;
		mask-size: 100% 100%;	-webkit-mask-repeat: no-repeat;	-webkit-mask-position: center;-webkit-mask-size: 100% 100%; }

.icon_menu { mask-image: url('/img/svg/icon_menu.svg');	-webkit-mask-image: url('/img/svg/icon_menu.svg'); }
.icon_alarm { mask-image: url('/img/svg/icon_alarm.svg'); -webkit-mask-image: url('/img/svg/icon_alarm.svg'); }
.icon_setting { mask-image: url('/img/svg/icon_setting.svg'); -webkit-mask-image: url('/img/svg/icon_setting.svg'); }
.icon_user { mask-image: url('/img/svg/icon_user.svg'); -webkit-mask-image: url('/img/svg/icon_user.svg'); }
.icon_user_x { mask-image: url('/img/svg/icon_user_x.svg'); -webkit-mask-image: url('/img/svg/icon_user_x.svg'); }
.icon_lock { mask-image: url('/img/svg/icon_lock.svg'); -webkit-mask-image: url('/img/svg/icon_lock.svg'); }
.icon_trash { mask-image: url('/img/svg/icon_trash.svg'); -webkit-mask-image: url('/img/svg/icon_trash.svg'); }

.icon_check { mask-image: url('/img/svg/icon_check.svg'); -webkit-mask-image: url('/img/svg/icon_check.svg'); }
.icon_question { mask-image: url('/img/svg/icon_question.svg');	-webkit-mask-image: url('/img/svg/icon_question.svg'); }
.icon_triangle { mask-image: url('/img/svg/icon_triangle.svg');	-webkit-mask-image: url('/img/svg/icon_triangle.svg'); }
.logoTitle { color: #32cdcd; line-height: 100%; opacity: 0.8; }
.logoTitleSub { color: #fdfdfd; line-height: 100%; opacity: 0.8; padding-bottom: 15px; }

ul.nav_vertical li{display:block;}
ul.nav_vertical li.label{margin-left:20px;margin-top:20px;}

.breadcrumb-nav { padding: 10px 20px; font-size: 14px; white-space: nowrap;/* 줄바꿈 방지 */overflow: hidden;/* 넘치는 내용 숨김 */ }
.breadcrumb li { display: inline-block;	/*max-width: 150px;*/         /* 항목별 최대 너비 */
	overflow: hidden; text-overflow: ellipsis;  /* ... 표시 */ white-space: nowrap;	vertical-align: middle; }
.breadcrumb { list-style: none; display: flex; gap: 8px; align-items: center; }
.breadcrumb li::after { content: ">"; margin: 0 8px; color: #aaa; }
.breadcrumb li:last-child::after { content: ""; }




.stat-card { flex: 1; background-color: #f9f9f9; border: 1px solid #ddd; padding: 20px;
	text-align: center;	border-radius: 8px; }
.stat-card h3 { margin-bottom: 10px; font-size: 18px;	color: #555; }
.stat-card p { font-size: 24px; font-weight: bold; color: #333; }



ul.board-list li {padding:10px;}
ul.board-list li.board-header{display: flex; background-color: #f0f0f0;}
ul.board-list li.board-item{ display: flex; border-bottom: 1px solid #ccc; transition: background-color 0.2s; 
	border-bottom: 1px solid #ddd;line-height: 120%;}
ul.board-list li.board-item:hover{ background-color: #f9f9f9; }

.detail {overflow: hidden; max-height: 0; transition: max-height 0.3s ease; }
.board-item a {	display: flex; width: 100%;	padding: 20px; text-decoration: none; color: inherit; }