@charset "UTF-8";

:root{
    --primary:#4169e1; /* royalblue */
    --muted:#f3f4f6;
    --border:#e5e7eb;
    --text:#111827;
}

/* 공통 */
.text-left {text-align:left !important;}
.text-right {text-align:right}
.text-center {text-align:center}
.display-none {display:none !important;}
.display-flex {
	display: -webkit-flex !important;
	display: -moz-flex !important;
	display: -ms-flexbox !important;
	display: -o-flex !important;
	display: flex !important;
}
.flex-column {
	-webkit-flex-direction: column;
	flex-direction: column;
}
.display-block {display:block}
.display-inline {display:inline}
.display-inline-block {display:inline-block}
.float-right {float:right}
.w-100 {width:100%}
.w-90 {width:90%}
.mr-1 {margin-right:.2em !important;}
.mr-2 {margin-right:.4em !important;}
.mr-3 {margin-right:.6em !important;}
.mr-4 {margin-right:.8em !important;}
.mr-5 {margin-right:10em !important;}
.mr-auto {margin-right:auto;}
.ml-auto {margin-left:auto;}
.ml-1 {margin-left:.2em !important;}
.ml-2 {margin-left:.4em !important;}
.ml-5 {margin-left:1em !important;}
.mt-1 {margin-top:.2em !important;}
.mt-2 {margin-top:.4em !important;}
.mt-3 {margin-top:.6em !important;}
.mt-4 {margin-top:.8em !important;}
.mt-5 {margin-top: 1em !important;}
.mt-10 {margin-top: 2em !important;}
.mb-1 {margin-bottom:.2em !important;}
.mb-2 {margin-bottom:.4em !important;}
.mb-3 {margin-bottom:.6em !important;}
.mb-4 {margin-bottom:.8em !important;}
.mb-5 {margin-bottom:1em !important;}
.p-0 {padding:0 !important}
.p-1 {padding:1px !important}
.p-2 {padding:2px !important}
.pl-1 {padding-left:.2em !important}
.pl-2 {padding-left:.4em !important}
.pl-3 {padding-left:.6em !important}
.pl-4 {padding-left:.8em !important}
.pr-1 {padding-right:.2em !important}
.pr-2 {padding-right:.4em !important}
.pr-3 {padding-right:.6em !important}
.pr-4 {padding-right:.8em !important}
.border-none {border:none !important;}
.s-btn-ok {background-color:#1f8dd6;color:white;}
.s-btn-danger {background-color:#fc5353;color:white;}
.pure-button-info {background-color:#29b6f6;color:white;}
.pure-button-success {background-color:#66bb6a;color:white;}
.pure-button-danger {background-color:#ee6e73;color:white;}
.pure-button-warning {background-color:#ffc107;color:white;}
.pure-button-primary {background-color:#1f8dd6;color:white;}
.no-border {border:none !important;border-radius: 0px !important;}
.control-title{
	background-color: #F5F7FA;
	color:#333333;
	border: solid 1px #D1D5DB;
	padding: 3px;
}


.warning {color:red}
.align-center {
	-ms-flex-align:center;
	align-items:center;
}
.justify-center {
	-moz-justify-content: center;
	-ms-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
}
.flex-wrap {
	-moz-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.no-deco {text-decoration:none}
.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
/* flex width 내용만큼 */
.flex-width-0 {
	flex:0 0 auto;
	-ms-flex: 0 0 auto;
	display:block;
}
/* flex width 자동 꽉 채우기 */
.flex-width-1 {
	flex:1 1 auto;
	-ms-flex:1 1 auto;
	display:block;
}
label {
	cursor:pointer;
	align-items:baseline;
}
label > input {
	cursor:pointer;
}
input[type=checkbox] {
	cursor:pointer;
}

/* 버튼 */
button {border-radius:0.3em !important}
button.gray {
	border:1px solid #bbb;
	padding:.2em .4em .3em;
}
button.mid {
	padding:.4em .5em;
	font-size:95%;
}
button.small {
	padding:.2em .3em;
	font-size:90%;
}
button.x-small {
	padding:.1em .2em;
	font-size:80%;
}
button.new-mid {
	border:1px solid #bbb;
	padding:.2em .4em .3em;
}

/*복붙상자*/
div.pastebox {
	font-size:1px;
	overflow:hidden;
}

/* 페이징 */
ul.pagination {
	list-style:none;
	display: -webkit-flex !important;
	display: -moz-flex !important;
	display: -ms-flexbox !important;
	display: -o-flex !important;
	display: flex !important;
	margin:8px;
	padding:0;
	-moz-justify-content: center;
	-ms-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;	font-size:140%;
}
ul.pagination li {
	margin:0 5px;
}
ul.pagination li.active > a{
	color:red;
}
ul.pagination li > a {
	text-decoration:none;
	font-weight:normal;
	color:#666;
}

ul.common {
	padding-left:20px;
}

/*MODAL 배경*/
.blocker {
	background-color:rgba(0,0,0,0.5) !important;
}
/*MODAL TITLE*/
.modal-title {
	border-bottom:1px dotted #ccc;
	margin-bottom:.6em;
	font-weight:bold;
	color:#1f8dd6;
}
/*MODAL 버튼*/
.modal-buttons {
	border-top:1px dotted #ccc;
	margin-top:.2em;
	padding-top:0.9em;
}
/*MODAL의 내용 줄*/
.modal-row {
	margin-bottom:.2em;
	display:flex;
}
.modal-row > span {
	align-self:center;
}

/* 진행바 */
div.progress-total {
	border:1px solid #ddd;
	height:1.5em;
}
div.progress-complete {
	background-color:#1f8dd6;
	width:30%;
	height:1.5em;
}

/* 달력 */
div.datepicker {
	position:absolute;
	background:white;
	border:1px solid #999;
	box-shadow: 6px 6px 16px #aaa;
	padding:1em;
	margin:1em;
}
.ui-datepicker{ font-size: 95%;}
#ui-datepicker-div {width:auto !important;}
.ui-datepicker .ui-datepicker-group{width:14em}

@media screen and (min-width:35.5em){
	.w-sm-1-6 {
		width:16.666666% !important;
	}
}

@media screen and (min-width:48em){
	.w-md-1-3 {
		width:33.333333% !important;
	}
}

@media screen and (min-width:64em){
	.w-lg-1-3 {
		width:33.333333% !important;
	}
	.w-lg-1-6 {
		width:16.666666% !important;
	}
}

@media screen and (min-width:80em){
	.w-xl-1-6 {
		width:16.666666% !important;
	}
	.w-xl-1-12 {
		width:8.333333% !important;
	}
}


.spinner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.spinner {
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top: 4px solid #fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

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

/* 토글 css */
.toggle-switch label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    align-self: center;
}
/* 체크박스 기본 */
.toggle-switch [type="checkbox"] {
    appearance: none;
    position: relative;
    border: max(2px, 0.1em) solid gray;
    border-radius: 1.25em;
    width: 2.25em;
    height: 1.25em;
}
/* 원 모양 */
.toggle-switch [type="checkbox"]::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform: scale(0.8);
    background-color: gray;
    transition: left 250ms linear;
}
/* 체크 상태 */
.toggle-switch [type="checkbox"]:checked {
    background-color: #1e90ff;
    border-color: #1e90ff;
}
.toggle-switch [type="checkbox"]:checked::before {
    background-color: white;
    left: 1em;
}
/* 비활성 상태 */
.toggle-switch [type="checkbox"]:disabled {
    border-color: lightgray;
    opacity: 0.7;
    cursor: not-allowed;
}
.toggle-switch [type="checkbox"]:disabled:before {
    background-color: lightgray;
}
.toggle-switch [type="checkbox"]:disabled + span {
    opacity: 0.7;
    cursor: not-allowed;
}
/* 포커스 상태 */
.toggle-switch [type="checkbox"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) solid #1e90ff;
}
/* 호버 상태 */
.toggle-switch [type="checkbox"]:enabled:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
}


.card {background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 6px 20px rgba(0,0,0,.04); padding:16px;}
.section-header{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-bottom:8px;
}
.section-title{font-weight:600; margin-bottom:8px}