* { margin:0; padding: 0; outline: none; }
body,input,button { color: #333; font-size: 1rem; font-weight: 400; font-family: 'pretendard', sans-serif; word-break: keep-all; letter-spacing: -.3px; }
a,ul, li, ol { list-style: none; text-decoration: none; }


/* input */
input { border: 1px solid #AEAEAE; padding: 0.75rem; border-radius: 4px; }
input:focus { border: 1px solid #296CDF; }

/* button */
button { border: 0; border-radius: 4px; background: #296CDF; color: #fff; padding: 0.5rem 0.75rem; cursor: pointer;  font-weight: 500; }
button:hover { background: #1A5BCA; }

#wrap { width: 100%; height: 100%; min-width: 320px; max-width: 768px; font-size: 1rem; margin: 0 auto; position: relative; }

/* 로그인 */
.loginBox { text-align: center; padding: 0 30px; margin-top: 100px; }
.loginBox .title { color: #296CDF; margin-bottom: 20px; }
.loginBox .company { font-size: 1.25rem; font-weight: 500; margin-bottom: 20px; }
.loginBox .inputForm { display: flex; flex-direction: column; gap: 8px; }
.loginBox .inputForm button { margin-top: 10px; padding: 0.75rem; }

@media screen and (min-width: 480px) {
	.loginBox .inputForm {
		width: 400px;
		margin: 0 auto;
	}
}

/* 메인화면 */
.mainTopBar { height: 50px; background: #296CDF; color: #fff; padding: 0 22px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.mainTopBar .company { font-weight: 500; }

.inner { width: 100%; position: absolute; top: 0; padding-top: 50px; padding-bottom: 62px; }

.inner .mainListBox ul { display: flex; flex-direction: column; }
.inner .mainListBox ul li { border-bottom: 1px solid #ccc; padding: 16px 22px; background: url(/skin/dt/img/arrow-right.svg) no-repeat 95% center; background-size: 10px; }
.inner .mainListBox ul li a { display: flex; align-items: center; overflow: hidden; }
.inner .mainListBox ul li a .state { float: left; width: 18px; height: 18px; border-radius: 50%; background: #ccc; }
.inner .mainListBox ul li a .state.red { background: #FF2222; }
.inner .mainListBox ul li a .state.green { background: #7BDC3A; }
.inner .mainListBox ul li a .state.black { background: #000000; }
.inner .mainListBox ul li a .title { float: left; padding-left: 10px; font-size: 1.125rem; font-weight: 500; color: #333; }

.mainBtmBar { width: 100%; min-width: 320px; max-width: 768px; position: fixed; bottom: 0; z-index: 1; background: #fff; }
.mainBtmBar ul { width: 100%; border-top: 1px solid #9C9C9C; display: flex; }
.mainBtmBar ul li { width: 50%; text-align: center; border-right: 1px solid #9C9C9C; padding: 11px 10px 6px; }
.mainBtmBar ul li:last-child { border-right: 0; }
.mainBtmBar ul li a { display: block; }
.mainBtmBar ul li img { width: 24px; }
.mainBtmBar ul li p { color: #999; font-weight: 500; font-size: 0.875rem; padding-top: 4px; }
.mainBtmBar ul li.active p { color: #296CDF; }


/* my */
.paddingBox { padding: 18px 22px; }
.profileBox { padding: 22px; margin-bottom: 20px; border-radius: 18px; background: #E8EFFB; display: flex; align-items: center; position: relative; }
.profileBox .left { margin-right: 16px; }
.profileBox .center .name { font-size: 1.25rem; font-weight: 600; }
.profileBox .center .text { font-weight: 500; color: #296CDF; padding-top: 6px; }
.profileBox a { display: block; position: absolute; top: 18px; right: 22px; }

.infoBox ul { display: flex; flex-direction: column; gap: 10px; }
.infoBox ul li { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.infoBox ul li p { font-size: 1.125rem; font-weight: 500; }
.infoBox ul li .left { color: #296CDF; font-weight: 600; }
.infoBox ul li .state { color: #9C9C9C; }
.infoBox ul li .state.green { color: #53BA0D; }
.infoBox ul li .state.red { color: #FF2222; }

/* 설정 */
.topBar { box-sizing: border-box; height: 50px; padding: 12px 22px; position: relative; border-bottom: 1px solid #9C9C9C; background: #fff; z-index: 1; }
.topBar a { display: block; position: absolute; top: 13px; left: 22px; width: 20px; }
.topBar a img { width: 12px; }
.topBar .title { text-align: center; font-size: 1.125rem; font-weight: 600; padding-top: 2px; }

.listWrap ul { display: flex; flex-direction: column; }
.listWrap ul li { border-bottom: 1px solid #ccc; padding: 18px 22px; background: url(/skin/dt/img/arrow-right.svg) no-repeat 95% center; background-size: 10px; }
.listWrap ul li a { display: block; font-size: 1.125rem; font-weight: 500; color: #333; }

.inputBox { display: flex; flex-direction: column; gap: 6px; }

.btmBar { width: 100%; padding: 12px 20px; background: #fff; position: absolute; bottom:0; left: 0; z-index: 1; box-sizing: border-box; }
.btmBar button { width: 100%; text-align: center; padding: 12px; }


/* 모달 기본 */
dialog { margin: auto; box-sizing: border-box; border: none; border-radius: 12px; padding: 20px 24px; box-shadow: 0 12px 36px rgba(0,0,0,.25); max-width: 360px; width: calc(100vw - 32px); text-align: center; }
dialog::backdrop { background: rgba(0,0,0,.35); }

/* 내용 */
.okmodal-body { margin: 0; }
.message { padding: 20px; font-size: 1rem; }
.btnBox { display: flex; gap: 10px; width: 100%; margin-top: 20px; }
.btnBox button { width: 100%; padding: 0.75rem; }
.btnBox button.gray { background: #bcbcbc; }



/* 상세화면(1) */
.table { width: 100%; border-collapse: collapse; }
.table thead { background: #ddd; }
.table thead th { font-size: 1rem; font-weight: 600; padding: 0.375rem; }
.table tbody { text-align: center; }
.table tbody tr { border-bottom: 1px solid #ccc; }
.table tbody tr.danger { background: #f15353; color: #fff; }
.table tbody td { padding: 0.5rem 0.375rem; }



.callBtn { width: 100%; height: 44px; display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 50px; }
.callBtn p { font-size: 1.125rem; }
.callBtn img { width: 16px; }
.completeBtn { width: 100%; height: 44px; display: flex; justify-content: center; align-items: center; gap: 12px; background: #53BA0D; margin-top: 36px; }
.completeBtn:hover { background: #45A106; }
.completeBtn p { font-size: 1.125rem; }
.completeBtn img { width: 18px; }