.only-mobile{
	display: none;
}

.responsive-mobile .only-mobile{
	display: block;
}
.responsive-mobile .only-pc{
	display: none;
}

@media screen and (max-width: 1024px){
	.form-register{
		width: 600px;
	}
	.team-history{
		width: 600px;
	}
}

@media screen and (max-width: 960px){
	.form-register{
		width: 480px;
	}
	.team-history{
		width: 480px;
	}
}

/* Tablet */
@media screen and (max-width: 768px){
	.only-pc{
		display: none !important;
	}
	.no-mobile{
		width: 90dvw; height: 300px;
	}
	.no-mobile::before{
		height: 100%;
		content: "모바일 환경에서는 해당 기능을 지원하지 않습니다. PC에서 접속하여 이용해 주세요.";
		text-align: center; font-size: var(--fs-rg);
		display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;
	}
	.no-mobile *{
		display: none;
	}
	
	.wrap{
		height: 100dvh;
	}
	.header{
		flex-direction: column; height: auto;
	}
	.header__logo{
		background: none; justify-content: flex-start; padding-left: var(--pd-sm);
	}
	.header__logo a{
		display: block; width: 140px; height: 30px;
		background-image: url("/img/logo-vertical.svg"); background-repeat: no-repeat; background-position: center center; background-size: contain;
	}
	.header__logo img{
		display: none;
	}
	.header__nav{
		width: 100%; height: 36px;
		background-color: var(--color-bg-primary); display: block; padding: 0;
	}
	.header__system{
		padding: 0 var(--pd-sm);
		overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch; touch-action: pan-x; 
	}
	.header__system::-webkit-scrollbar{
		display: none;
	}
	.header__system .system__btn{
		font-size: var(--fs-rg); padding: var(--pd-sm); color: var(--color-text-inverse);
		opacity: 0.7;
		flex: 0 0 auto; white-space: nowrap;
	}
	.header__system .system__btn.active{
		color: var(--color-text-inverse); opacity: 1;
	}
	.header__system .system__btn.active::before{
		background-color: var(--color-bg-surface);
	}
	.header__utill{
		display: none;
	}
	.gnb{
		position: fixed; right: 0; top: 0; z-index: 10001;
		width: 90%; height: 100dvh; background-color: var(--color-bg-surface);
		box-shadow: 0 0 40px rgba(0, 0, 0, 0.3);
		display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
		display: none; animation: gnbAni 0.4s ease-in forwards;
	}
	@keyframes gnbAni{
		0%{
			right: -100%;
		}
		100%{
			right: 0;
		}
	}
	.gnb.isOpen{
		display: flex;
	}
	.gnb .gnb-close{
		position: absolute; right: var(--pd-sm); top: 10px;
	}
	.gnb .users{
		background-color: var(--color-bg-onSurface); color: var(--color-text-default);
		border-bottom: 1px solid var(--color-border-default);
		flex-shrink: 0;
	}
	.gnb .users .btn--outlined.btn--inverse{
		border-color: var(--color-button-border-default); color: var(--color-text-default);
	}
	.gnb .users .icon--inverse{
		background-color: var(--color-text-default);
	}
	.gnb__list{
		flex-grow: 1; overflow-y: auto;
	}
	.gnb__list > li{
		border-color: var(--color-border-default);
	}
	.gnb__list > li > a{
		color: var(--color-text-default);
	}
	.gnb__list > li > a::after{
		background-color: var(--color-bg-gray);
	}
	.gnb__list .sub-menu > li > a{
		color: var(--color-text-strong); font-weight: 500; 
	}
	.gnb__list > li > ul > li.has-child > a::before{
		background-color: var(--color-bg-gray); transform: rotate(0);
	}
	.gnb__list > li > ul > li.has-child.open > a::before{
		transform: rotate(180deg);
	}
	.gnb__list > li > ul > li > a.menu--active::before{
		background-color: var(--color-bg-surface);
	}
	.gnb__list > li > ul > li > ul > li > a::before{
		background-color: var(--color-border-default);
	}
	.header__icons{
		position: absolute; right: var(--pd-sm); top: 12px;		
	}
	.header__icons .gnb-open{
		position: relative; border-radius: 0;
	}
	
	
	.container{
		height: calc(100% - 86px);
	}
	
	.content__wrap{
		min-height: 100%; height: 100%;
	}
	
	.content__header{
		/*flex-direction: column; align-items: stretch; row-gap: 10px;*/
		
		position: relative;
	}
	.content__header .content__title h3{
		font-size: var(--fs-md);
	}
	.content__header .content__btns--multiple{
		flex-direction: column;
		position: absolute; right: 0; top: 0; z-index: 101;
		background-color: var(--color-bg-surface); padding: var(--pd-sm);
		padding-top: 40px;
	}
	.content__header .content__btns--multiple .btn--more{
		position: absolute; right: 10px; top: 8px;
	}
	.content__btns--multiple .btn{
		display: none; width: 100%;
	}
	.content__btns--multiple .btn:only-child{
		display: flex !important;
	}

	
	
	
	.only-mobile{
		display: block;
	}
	
	
	.search-box{
		align-items: flex-start;
	}
	.search-box__form{
		display: grid; grid-template-columns: max-content 1fr; column-gap: 20px; row-gap: 5px;
	}
	.search-box__form > dl{
		display: contents;
	}
	.search-box__form > dl > dt{
		white-space: nowrap;
	}
	.search-box__form > dl > dd{
		flex-grow: 1;
		min-width: 0;
	}
	.search-box__form > dl > dd .datepicker{
		width: 100%; 
	}
	.search-box__form > dl > dd input[type="text"],
	.search-box__form > dl > dd select{
		width: 100%;
	}
	
	.search-layout{
		height: auto; min-height: 100%; 
	}
	.tree-layout{
		flex-direction: column; align-items: stretch;
	}
	.tree-panel{
		height: auto;
	}
	.tree-panel__source{
		width: 100%;
	}
	.tree-panel.tree-panel__source .tbl__body{
		height: 200px; flex-grow: 0;
	}
	.tree-panel.tree-panel__detail .tbl__body{
		height: 400px;
	}
	
	.tbl-wrap .tbl__body{
		overflow: hidden; min-height: 320px; 
		height: 50dvh;
	}
	
	.search-layout .tbl-wrap{
		height: auto;
	}
	
	
	.layer-wrap{
		left: 50% !important; top: 50% !important; transform: translate(-50%, -50%);
	}
	
	.login{
		height: 100%; min-height: 500px;
		background-color: var(--color-bg-surface);
		display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center;
	}
	.login__box{
		width: 100%; max-width: 480px; height: auto; padding: 0 40px;
		position: relative; left: auto; top: auto; transform: none;
	}
	
	.tbl-wrap .tbl__total{
		bottom: 15px;
	}
	
	.modal__content{
		font-size: var(--fs-rg);
	}
	
	.charger-modify{
		width: 100%; min-width: 320px;
	}
	
	.tbl--register table colgroup{
			display: none;
	}
	.tbl--register table tr{
		width: 100%;
		display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
	}
	.tbl--register table tr th,
	.tbl--register table tr td{
		display: block;
	}
	
	.fc .fc-toolbar-title{
		font-size: 1rem;
	}
	.fc .fc-daygrid-day-top{
		height: 30px;
		padding: 5px 5px 10px 5px;
		display: block;
		width: 100%;
	}
	.fc .fc-daygrid-day-number{
		width: 100%;
		font-size: var(--fs-rg); padding: 0; display: block; 
	}
	.fc .fc-daygrid-day-number > span{
		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 2px;
		align-items: flex-end;
		width: 100%;
		min-width: 0;
	}
	.fc .fc-daygrid-day-number > span > span{
		order: 1; line-height: 100%;
	}
	.fc .fc-daygrid-day-number > span .holiday{
		order: 2; font-size: 10px; text-align: right;
		min-width: 0;
		max-width: 100%;
		overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; 
	}
	.fc-h-event .fc-event-title{
		font-size: var(--fs-sm);
	}
	.fc .fc-daygrid-day-events .fc-h-event{
		padding: 0 5px;
	}
	.fc-theme-standard td::before{
		width: 2px;
	}
	.fc .fc-daygrid-day-bottom{
		display: flex; justify-content: flex-end; align-items: center; padding-right: 5px;
	}
	.fc-direction-ltr .fc-daygrid-more-link{
		width: 15px;
	}
	
	
	.custom-grid__head{
		display: none;
	}
	.custom-grid__rows{
		display: block; padding: 10px;
	}
	.custom-grid__body .custom-grid__rows > div{
		padding: 0; line-height: 140%;
	}
	.project-search .custom-grid__body .custom-grid__rows .project__code, 
	.project-search .custom-grid__body .custom-grid__rows .project__date{
		text-align: left;	
	}
	.project-search .custom-grid__body .custom-grid__rows .project__name,
	.code-search .custom-grid__body .custom-grid__rows .category__code,
	.code-search .custom-grid__body .custom-grid__rows .category__name,
	.code-search .custom-grid__body .custom-grid__rows .grid__categoryCd,
	.code-search .custom-grid__body .custom-grid__rows .grid__categoryNm,
	.custom-grid__body .custom-grid__rows .grid__projectNm{
		font-weight: bold; color: var(--color-text-strong);
	}
	.code-search .custom-grid__body .custom-grid__rows .grid__categoryCd,
	.code-search .custom-grid__body .custom-grid__rows .grid__categoryNm{
		display: inline-flex;
		align-items: center;
	}
	.code-search .custom-grid__body .custom-grid__rows .grid__categoryCd::after{
		content: " - ";
		font-weight: 400;
		color: var(--color-text-default);
		margin: 0 2px;
	}
	.project-search .custom-grid__body .custom-grid__rows .project__date,
	.code-search .custom-grid__body .custom-grid__rows .category__remark,
	.custom-grid__body .custom-grid__rows .grid__projectDate{
		color: var(--color-text-default); margin-top: 5px; font-size: var(--fs-sm);
	}
	.project-search .custom-grid__body .custom-grid__rows .project__manager::before,
	.custom-grid__body .custom-grid__rows .grid__empNm::before{
		content: "담당자 : "; margin-right: 4px;
	}
	.project-search .custom-grid__body .custom-grid__rows .project__manager:empty::before{
		display: none;
	}
	.custom-grid__body .custom-grid__rows > div{
		border-left-width: 0;
	}
	.project-upload .custom-grid__head{
		display: block;
	}
	.project-upload .custom-grid__rows{
		display: grid; padding: 0;
	}
	.project-upload .custom-grid__body .custom-grid__rows > div{
		border-left-width: 1px; padding: 5px;
	}
	.custom-grid__body .custom-grid__rows > div.grid__remark{
		margin-top: 10px;
	}
	.custom-grid__body .custom-grid__rows .grid__remark--detail{
		margin-top: 5px; background-color: var(--color-bg-onSurface); padding: 5px; border-radius: var(--radius-control);
	}
	.search-panel{
		width: 100%; min-width: 420px;
	}
	.project-upload{
		min-width: 1000px;
	}
	.personnel-upload{
		min-width: 1000px;
	}
	.personnel-upload .custom-grid__rows{
		display: grid;
	}
	.personnel-search .custom-grid__rows{
		display: flex; flex-direction: row; flex-wrap: wrap; column-gap: 5px;
	}
	.personnel-search .grid__empNm{
		font-weight: bold; color: var(--color-text-strong); 
		order: 1;
	}
	.personnel-search .grid__empId{
		order: 4; width: 100%;	
	}
	.personnel-search .grid__empId::before{
		content: "사번 : "; display: inline-block; margin-right: 5px;
	}
	.personnel-search .grid__deptNm{
		order: 3; width: 100%; margin-top: 5px;
	}
	.personnel-search .grid__jobNm{
		order: 2; font-weight: bold; color: var(--color-text-strong); 
	}
	.vendor-search .custom-grid__rows{
		display: flex; flex-direction: row; flex-wrap: wrap;
	}
	.vendor-search .grid__clientCd{
		order: 2;
	}
	.vendor-search .grid__clientCd::before{
		content: " ("; display: inline-block; margin-left: 5px;
	}
	.vendor-search .grid__clientCd::after{
		content: ")";
	}
	.vendor-search .grid__clientNm{
		font-weight: bold; color: var(--color-text-strong); order: 1;
	}
	.vendor-search .grid__empNm{
		order: 3; width: 100%; margin-top: 5px;
	}
	.vendor-search .grid__empNm::before{
		content: "담당자 : "; display: inline-block; margin-right: 5px;
	}
	
	.product-register{
		width: 100%;
	}
	
	.workday--row{
		margin-top: 5px;
	}

	.btn{
		min-width: 50px; height: 32px; padding: 0 10px;
	}
	.btn-icon{
		width: 32px; height: 32px;
	}
	.input--search{
		height: 32px;
	}
	input, select{
		height: 32px;
	}
	
	.ts__box{
		height: 32px; line-height: 32px;
	}
	
	.search-panel__bar .input--search{
		height: 36px;
	}
	.search-panel__bar .input--search input{
		height: 34px;
	}
	.search-panel__bar .input--search .btn-icon:has(.icon-search){
		width: 34px; height: 34px;
	}
	.search-panel__bar .input--search .btn-icon.btn--sm{
		width: 20px; height: 20px; 
	}

}

/* Mobile */
@media screen and (max-width: 480px){
	.fc .fc-daygrid-day-number > span .holiday{
		font-size: 9px;
		line-height: 1.1;
	}
	.gnb__list > li > a{
		font-size: var(--fs-sm);
	}
	.gnb__list > li > ul > li{
		padding: 0 5px;
	}
	.gnb__list .sub-menu > li > a{
		font-size: var(--fs-rg); 
	}
	.gnb__list > li > ul > li > a + .sub-menu{
		padding-top: 5px;
	}
	.gnb__list > li > ul > li > ul > li > a{
		padding-left: 25px;
	}
	.gnb__list > li > ul > li > ul > li > a::before{
		left: 12px;
	}
	
	.search-box{
		flex-direction: column; row-gap: 10px;
	}
	.search-box__form{
		width: 100%;
	}
	.search-box__form > dl > dd{
		display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;
		gap: 5px;
	}
	.search-box__form > dl > dd input[type="text"],
	.search-box__form > dl > dd select{
		flex-grow: 1;
	}
	.search-box__form > dl > dd .datepicker{
		max-width: 100%;
	}
	.search-box__btn{
		width: 100%; text-align: right;
	}
	
	.pw-change{
		width: 100%;
	}
	.form--register dl dt{
		font-size: var(--fs-sm);
	}
	.pw-change .validation-msg{
		font-size: var(--fs-sm);
	}
	
	.layer-wrap{
		width: 94%; max-width: 94%;
	}
	
	.tbl--register{
		width: 100%; min-width: auto;
	}
	
	
	/*input, select, textarea{
		font-size: var(--fs-sm);
	}*/
	.label-ui input[type="checkbox"] + span, 
	.label-ui input[type="radio"] + span{
		font-size: var(--fs-sm);
	}
	.label-ui input[type="checkbox"] + span::before,
	.label-ui input[type="checkbox"] + span::after{
		top: 0;
	}
	.btn.btn--sm{
		font-size: 12px;
	}

	.login__header{
		font-size: var(--fs-rg);
	}
	.login__header h1{
		width: 180px;
	}
	.login__box{
		max-width: 100%; padding: 0 20px;
	}
	.login__form dl dt{
		font-size: var(--fs-rg);
	}
	.login__form .forgot-password{
		font-size: var(--fs-sm);
	}
	.login__form .btn--login{
		font-size: var(--fs-rg);
	}
	
	
	.workday{
		width: 100%;
	}
	/*.workday__form{
		flex-direction: column;
	}
	.workday__form > div{
		width: 100%;
	}*/
	.layer__header{
		padding: 8px var(--pd-sm) 8px var(--pd-sm);
	}
	.layer__body{
		padding: 0 var(--pd-sm) var(--pd-sm) var(--pd-sm);
	}
	.layer__body:has(> .layer__btns){
		padding-bottom: 54px;
	}
	.layer__body > .layer__btns{
		width: 100%; right: 0;
		padding: var(--pd-sm);
	}
	.workday__form{
		row-gap: 5px;
	}
	.workday__form > div dl dt{
		font-size: var(--fs-sm);
	}
	.workday--row{
		padding: var(--pd-sm);
	}
	
	.search-panel{
		min-width: 280px;
	}
	
	.tbl-wrap .tbl__top .btn{
		padding: 0 5px;
	}
	
	.charger-modify{
		min-width: 260px;
	}
	
	.form-register{
		width: 100%;
	}
	.team-history{
		width: 100%;
	}
	
	.fc .fc-daygrid-day-events .fc-h-event{
		padding: 0 2px;
	}
	.fc-h-event .fc-event-title{
		font-size: 10px;
	}
	.fc-popover-body .fc-h-event .fc-event-title{
		font-size: 12px;
	}
	
	.tbl-wrap .tbl__total{
		display: none;
	}
	
	
}