* {color: #111; font-weight: 500; line-height: 1.5; word-break: keep-all;}
.ft {font-family:'NanumSquareNeo' !important;}
.ft_l {font-family:'NanumSquareNeoLight' !important;}
.ft_b {font-family:'NanumSquareNeoBold' !important;}
.ft_eb {font-family:'NanumSquareNeoExtraBold' !important;}
.ft_h {font-family:'NanumSquareNeoHeavy' !important;}

.inner {padding: 0 20px;}


/* 버튼 */
button {font-family: inherit; text-align: center; width: 100%; font-weight: 600;}
button.half {width: 50%;}
button.lg {padding: 18px 15px; border-radius: 100px; font-size: 20px; font-family: 'NanumSquareNeoBold' !important;}
button.md {padding: 15px 15px; border-radius: 100px; font-size: 16px;}
button.sm {padding: 12px 15px; border-radius: 100px; font-size: 15px;}
button.xs {padding: 10px 12px; border-radius: 100px; font-size: 14px;}
button.col1 {background: linear-gradient(to right bottom, #E32200, #FF9A52); color: #fff;}
button.col2 {background-color: #E32200; color: #fff;}
button.col3 {background-color: #FF9A52; color: #fff;}
button.col4 {background-color: #ddd; color: #666;}
button.col5 {background-color: #eee; color: #888;}
button.col6 {background-color: #D34C1B; color: #fff;}
button.line1 {border: 1px solid #E32200; color: #E32200; background-color: #fff;}
button.line2 {border: 1px solid #19C552; color: #19C552; background-color: #fff;}
button.line3 {border: 1px solid #CCCCCC; color: #777; background-color: #fff;}
button.line4 {border: 1px solid #AAAAAA; color: #555; background-color: #fff;}
.btn_box {width: 100%; display: flex; gap: 10px;}


/* 인풋 */
input[type="text"],input[type="password"], input[type="id"], input[type="number"] {padding: 14px 6px; background-color: #fff; outline: none; border-bottom: 1px solid #ccc; font-size: 18px; width: 100%;}
input[type="text"]:focus, input[type="id"]:focus, input[type="password"]:focus , input[type="number"]:focus {border-color: #555;}
input[type="text"]:active, input[type="id"]:active, input[type="password"]:active, input[type="number"]:focus {border-color: #555;}
input:read-only {color: #777;}
input::placeholder {color: #888; font-weight: 400; font-family: "Pretendard" !important; font-size: 16px;}
textarea {padding: 14px 6px; outline: none; border: none; border-bottom: 1px solid #ccc; font-size: 18px; background-color: #fff; max-height: 100px; border-radius: 0; width: 100%;}
textarea:focus, textarea:read-only {border-color: #555;}


/* 인풋 넘버 버튼 없애는 속성 */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
/* Firefox  */
input[type='number'] {-moz-appearance: textfield;}


/* 체크박스, 라디오 */
input[type="checkbox"], input[type="radio"] {display: none;}
input + label {font-size: 16px; color: #666; padding-left: 32px; position: relative;}
input:checked + label {color: #111;}
input[type="checkbox"] + label::before {content: ""; display: block; width: 24px; height: 24px; border-radius: 100%; background: url(../img/chk.png) no-repeat center/contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
input[type="checkbox"] + label::after {content: ""; display: none; width: 24px; height: 24px; border-radius: 100%; background: url(../img/chk_on.png) no-repeat center/contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
input[type="checkbox"]:checked + label::after  {display: block;}

input[type="radio"] + label {display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; border-radius: 100px; border: 1px solid #f7f7f7; background-color: #f7f7f7;}
input[type="radio"] + label span {font-size: 16px; color: #666; line-height: 1;}
input[type="radio"] + label i {display: block; width: 24px; height: 24px; border-radius: 100%; background: url(../img/chk.png) no-repeat center/contain;}
input[type="radio"]:checked + label {background-color: #fff; border-color: #E32200;}
input[type="radio"]:checked + label span {color: #111;}
input[type="radio"]:checked + label i {background: url(../img/chk_on.png) no-repeat center/contain;}


/* 셀렉트박스 커스텀 */
.slt_box {display: flex; align-items: center; padding: 15px 18px; border-radius: 100px; border: 1px solid #ddd; width: 100%; justify-content: space-between; background-color: #fff;}
.slt_box span {font-size: 18px; color: #777; line-height: 1;}
.slt_box span.on {color: #111;}
.slt_box i {display: block; width: 14px; height: 14px; background: url(../img/arrow02.png) no-repeat center/contain;}
.slt_wrap {width: 100%; display: flex; gap: 10px; align-items: center;}


/* ======== 메인 ======== */
.main_hd {display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 30px 0;}
.main_hd .alarm {width: 28px; aspect-ratio: 1; background: url(../img/icon_alarm.png) no-repeat center/contain;}
.main_hd .alarm.on {background: url(../img/icon_alarm_on.png) no-repeat center/contain;}

.main_box {display: flex; flex-direction: column; align-items: flex-start; gap: 30px; padding-top: 10px; width: 100%;}
.main_txt {display: flex; flex-direction: column; align-items: flex-start; width: 100%;}
.main_txt p {font-size: 22px; color: #333;}
.main_txt p em {color: #222; display: inline-block;}
.main_txt span {font-size: 22px;}
.menu_list {display: flex; flex-direction: column; width: 100%; gap: 18px;}
.menu_con {display: flex; align-items: center; justify-content: space-between; padding: 20px 30px; background-color: #fff; border-radius: 200px; box-shadow: 0 0 15px #00000010;}
.menu_con dl {display: flex; align-items: center; gap: 15px;}
.menu_con dt {display: block; width: 35px; aspect-ratio: 1;}
.menu_con dt.cargo {background: url(../img/icon_cargo.png) no-repeat center/contain;}
.menu_con dt.upload {background: url(../img/btn_upload.png) no-repeat center/contain;}
.menu_con dt.match {background: url(../img/icon_match.png) no-repeat center/contain;}
.menu_con dt.pay {background: url(../img/icon_pay.png) no-repeat center/contain;}
.menu_con dt.profile {background: url(../img/icon_profile.png) no-repeat center/contain;}
.menu_con dt.mypage {background: url(../img/icon_mypage.png) no-repeat center/contain;}
.menu_con dd {font-size: 20px; position: relative;}
/* .menu_con.on dd::after {content: ""; display: block; position: absolute; width: 12px; height: 12px; border-radius: 100%; background: linear-gradient(to right bottom, #E32200, #FF9A52); top: 50%; right: -25px; transform: translateY(-50%);} */
.menu_con i {display: block; width: 16px; aspect-ratio: 1; background: url(../img/arrow01.png) no-repeat center/contain;}
.menu_con + button {margin: 5% auto 50px;}



/* ======== 알림내역 ======== */
.alarm_box {display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-radius: 15px; background-color: #fff; box-shadow: 0 0 10px #00000005;}
.alarm_box i {display: block; width: 45px; aspect-ratio: 1; background: url(../img/alarm_default.png) no-repeat center/cover; border-radius: 100%; overflow: hidden;}
.alarm_box.work i {background: url(../img/alarm_work.png) no-repeat center/cover;}
.alarm_box.cargo i {background: url(../img/alarm_cargo.jpg) no-repeat center/cover;}
.alarm_box.pay i {background: url(../img/alarm_pay.png) no-repeat center/cover;}
.alarm_box dl {display: flex; flex-direction: column; align-items: flex-start; gap: 8px;}
.alarm_box dt {font-size: 18px; line-height: 1.4;}
.alarm_box dd {font-size: 16px; color: #888; line-height: 1;}



/* ======== 화물 ======== */
/* 화물목록 */
.tab {display: flex; align-items: center; width: 100%; padding: 8px; border-radius: 100px; background-color: #e9e9e9; margin: 30px auto 15px;}
.tab span {width: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; color: #888; background-color: #e9e9e9; border: 2px solid #e9e9e9; line-height: 1; padding: 12px 0; border-radius: 100px;}
.tab span.wd5 {width: 50%;}
.tab span.on {background-color: #fff; border-color: #E32200; color: #E32200; font-weight: 700;}
.item_list {display: flex; flex-direction: column; gap: 20px; width: 100%; padding-bottom: 50px;}
.list_sub {padding-top: 20px; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.list_sub .amount_txt {font-size: 18px; color: #888;}
.list_sub .amount_txt em {color: #E32200; display: inline-block;}
.slt_one {display: flex; align-items: center; gap: 8px;}
.slt_one span {font-size: 16px; color: #888;}
.slt_one i {display: block; width: 14px; height: 14px; background: url(../img/arrow02.png) no-repeat center/contain;}
.work_con {border-radius: 15px; background-color: #fff; border: 1px solid #eee; box-shadow: 0 0 10px #00000005; display: flex; width: 100%; flex-direction: column; gap: 20px; padding: 25px;}
.work_info {display: flex; flex-direction: column; width: 100%; gap: 25px;}
.work_info .top {display: flex; width: 100%; justify-content: space-between; align-items: center;}
.work_info .top .status {padding: 10px 20px; border-radius: 50px; background-color: #f3f3f3; color: #555; font-size: 18px; font-family:'NanumSquareNeoBold' !important; line-height: 1;}
.work_info .top .status.ing {background-color: #E32200; color: #fff; font-family:'NanumSquareNeoExtraBold' !important;}
.work_info .top .status.wait1 {background-color: #19C552; color: #fff;}
.work_info .top .status.wait2 {background-color: #FF9A52 ; color: #fff;}
.work_info .top .status.yet {background-color: #fff; border: 1px solid #ccc; color: #888;}
.work_info .top dl {display: flex; align-items: center; gap: 10px;}
.work_info .top dt {font-size: 18px; color: #666; line-height: 1; position: relative;}
.work_info .top dt::after {content: ""; display: block; width: 4px; height: 4px; border-radius: 100%; background-color: #aaa; position: absolute; top: 50%; right: -7px; transform: translateY(-50%);}
.work_info .top dd {font-size: 18px; color: #666; line-height: 1;}
.work_info .work_tit {display: flex; flex-direction: column; width: 100%; gap: 15px; align-items: flex-start; padding-bottom: 20px; border-bottom: 1px solid #ddd;}
.work_tit .pay_info {display: flex; align-items: center; gap: 12px; padding: 0; width: 100%;}
.work_tit .pay_info::after {display: none;}
.work_tit .pay_info dt {font-size: 24px; line-height: 1;}
.work_tit .pay_info dd {background: linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -webkit-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -moz-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -o-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; font-size: 20px; line-height: 1; display: none;}
.work_tit .work_dist {display: flex; align-items: center; gap: 16px; width: 100%;}
.work_tit .work_dist span {font-size: 20px; color: #666; line-height: 1; position: relative;}
.work_tit .work_dist span.point {color: #ff9a52;}
.work_tit .work_dist span::after {content: ""; display: block; width: 4px; height: 4px; border-radius: 100%; background-color: #d9d9d9; position: absolute; top: 50%; right: -10px; transform: translateY(-50%);}
.work_tit .work_dist span:last-child::after {display: none;}
.work_tit .work_car {display: flex; align-items: center; gap: 6px; row-gap: 4px; flex-wrap: wrap; width: 100%;}
.work_tit .work_car span {font-size: 18px; line-height: 1; padding: 8px 12px; border-radius: 6px; background-color: #555; color: #fff;}
.work_data {width: 100%; display: flex; flex-direction: column; gap: 25px; position: relative;}
.work_data .work_sch {display: flex; width: 100%; gap: 15px; align-items: flex-start; z-index: 1; position: relative;}
.work_data .work_sch:first-child::after {content: ""; display: block; width: 2px; height: calc(100% + 25px); background: linear-gradient(to bottom, #FAE8E5 50%, #E32200 50%); position: absolute; top: 15px; left: 11px; z-index: -1;}
.work_sch i {display: block; border-radius: 100%; width: 24px; height: 24px; position: relative; margin-top: 3px;}
.work_sch i::after {content: ""; display: block; position: absolute; width: 10px; height: 10px; border-radius: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.work_sch i.departure {background: radial-gradient(#fff 10%, #FAE8E5 100%);}
.work_sch i.departure::after {background-color: #E32200;}
.work_sch i.arrival {background-color: #E32200;}
.work_sch i.arrival::after {background-color: #fff;}
.work_sch .sch_con {width: calc(100% - 39px); display: flex; flex-direction: column; align-items: flex-start; gap: 6px;}
.work_sch .sch_con p {font-size: 22px; font-weight: 700; word-break: break-all;}
.work_sch .sch_con span {font-size: 18px; line-height: 1; color: #755c5c; font-weight: 700; padding-top: 7px;}
.work_sch .sch_con dl {display: flex; width: 100%; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 2px;}
.work_sch .sch_con dt {font-size: 16px; line-height: 1; color: #888; background-color: #f1f1f1; padding: 5px 12px; border-radius: 50px;}
.work_sch .sch_con dt.on {background-color: #fff; border: 1px solid #19C552; color: #19C552;}
.work_sch .sch_con dd {font-size: 20px; color: #555;}
.work_short {width: 100%; position: relative; display: flex; flex-direction: column; gap: 15px;}
.work_short::after {content: ""; display: block; width: 1px; height: 50%; border-right: 1px dashed #ddd; position: absolute; top: 14px; left: 6px; z-index: 0;}
.work_short .short_con {display: flex; align-items: center; gap: 6px; z-index: 1;}
.work_short .short_con i {display: block; width: 12px; height: 12px; border-radius: 100%;}
.work_short .short_con i.departure {background-color: #FAE8E5;}
.work_short .short_con i.arrival {background-color: #E32200;}
.work_short .short_con p {font-size: 16px; color: #555;}


/* 화물상세보기 */
.view_wrap {display: flex; width: 100%; flex-direction: column; gap: 40px; padding: 30px 0;}
.line {width: 100%; background-color: #f9f9f9; height: 10px;}
.item_box {width: 100%; display: flex; flex-direction: column; gap: 20px;}
.item_tit {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.item_tit dl {display: flex; align-items: center; gap: 10px;}
.item_tit dt {font-size: 18px; font-family:'NanumSquareNeoExtraBold' !important;}
.item_tit dd {font-size: 18px;}
.item_tit dd.round {background: linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -webkit-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -moz-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -o-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone;}
.item_tit dd.apply {color: #E32200;}
.item_tit i {display: block; width: 14px; height: 14px; background: url(../img/arrow02.png) no-repeat center/contain;}

.item_applier {display: flex; width: 100%; padding: 15px; border-radius: 10px; border: 1px solid #e5e5e5; background-color: #fff; flex-direction: column; gap: 10px;}
.applier_info {width: 100%; display: flex; flex-direction: column; gap: 6px;}
.applier_info .type {font-size: 16px; color: #888; padding-bottom: 5px; border-bottom: 1px dashed #ccc; font-weight: 500;}
.applier_info .name {font-size: 18px; font-weight: 600;}
.applier_main {display: flex; align-items: center; gap: 10px; flex-wrap: wrap; row-gap: 4px;}
.applier_info .applier_call {font-size: 16px; line-height: 1; color: #444;}

.work_main {display: flex; width: 100%; flex-direction: column; gap: 30px;}
.work_main .status_box {display: flex; width: 100%; align-items: center; gap: 10px;}
.work_main .status_box span {font-size: 18px; line-height: 1; padding: 8px 16px; border-radius: 50px; background-color: #fff; border: 1px solid #ccc; color: #999;}
.work_main .status_box .status {background-color: #f3f3f3; color: #555; border-color: #f3f3f3;}
.work_main .status_box .status.wait1 {border-color: #19C552; background-color: #fff; color: #19C552;}
.work_main .status_box .status.wait2 {border-color: #FF9A52; background-color: #FF9A52; color: #fff;}
.work_main .status_box .status.ing {border-color: #E32200; background-color: #E32200; color: #fff;}
.work_main .status_box .status.pay {border-color: #E32200; background-color: #fff; color: #E32200 ;}
.work_main .status_box .status.done {border-color: 1px solid #E32200; color: #E32200;}
.work_main .info_cargo {width: 100%; display: flex; flex-direction: column; gap: 25px;}
.work_main .name_cargo {width: 100%; display: flex; flex-direction: column;  gap: 15px;}
.work_main .name_cargo + .table {padding-top: 25px; border-top: 1px solid #ddd;}
.work_main .name_cargo dl {display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 8px;}
.work_main .name_cargo dt {font-size: 20px; font-weight: 600;}
.work_main .name_cargo dd {font-size: 18px; color: #555;}
.work_main .review_box {display: flex; align-items: center; gap: 6px;}
.work_main .review_box i {display: block; width: 25px; aspect-ratio: 1; background: url(../img/star.png) no-repeat center/contain;}
.work_main .review_box p {font-size: 20px; line-height: 1;}
.work_main .review_box p span {color: #666; font-size: 16px; line-height: inherit;}
.table {width: 100%; display: flex; flex-direction: column; gap: 8px;}
.table dl {display: flex; align-items: flex-start; width: 100%;}
.table dl.center {align-items: center;}
.table dl dt {font-size: 16px; color: #555; padding-top: 2px; width: 110px;}
.table dl dd {font-size: 18px; width: calc(100% - 110px);}
.table.pay {align-items: flex-end;}
.table.pay + .table.pay {margin-top: 15px;}
.table.pay dd p {text-align: right; font-size: 20px; color: #111;}
.table.pay dd span {padding-right: 2px;}
.table.pay dd span.total {color: #E32200;}
.work_data + .table.pay {border-top: 1px solid #ddd; padding-top: 25px; margin-top: 25px;}
.pay_info {padding-left: 18px; font-size: 16px; color: #888; position: relative;}
.pay_info::after {content: ""; display: block; width: 14px; height: 14px; background: url(../img/icon_info.png) no-repeat center/contain; position: absolute; top: 5px; left: 0;}
.car_name {display: flex; align-items: center; gap: 6px; width: 100%; padding-bottom: 8px; border-bottom: 2px dashed #bbb; margin-bottom: 4px;}
.car_name i {display: block; width: 18px; aspect-ratio: 1; background: url(../img/icon_calc.png) no-repeat center/contain;}
.car_name p {font-size: 16px; color: #333;}

.info_img {padding: 12px 15px; border-radius: 5px; background-color: #FFF2E7; color: #775753; font-size: 16px;}
.info_img em {color: #752F26; display: inline-block; font-weight: 700;}
.upload_area {width: 100%; display: flex; flex-direction: column; gap: 10px;}
.upload_box {width: 100%; display: flex; flex-direction: column; gap: 15px;}
.btn_upload {width: 100%; border-radius: 100px; position: relative; background-color: #f7f7f7; display: flex; align-items: center; justify-content: center; gap: 6px; overflow: hidden; padding: 12px 10px; border-radius: 50px;}
.btn_upload span {font-size: 16px; color: #888 !important; line-height: 1; font-weight: 600;}
.btn_upload i {display: block; width: 18px; aspect-ratio: 1; background: url(../img/icon_camera.png) no-repeat center/contain;}
.btn_upload input[type="file"] {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
input::file-selector-button {display: none;}
input[type="file"] {font-size: 0; background-color: transparent;}
.upload_box .upload_list {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;}
.upload_box .upload_list .img_box {aspect-ratio: 1; position: relative; border-radius: 8px; overflow: hidden;}
.upload_box .img_box img {width: 100%; height: 100%; object-fit: cover;}
.upload_box .img_box .delete {display: block; width: 35px; height: 35px; background: url(../img/delete_img.png) no-repeat center/contain; position: absolute; top: 8px; right: 8px;}

.worker_con.apply .status {font-size: 18px; line-height: 1; background-color: #666; color: #fff; padding: 8px 16px; border-radius: 50px; font-family:'NanumSquareNeoBold' !important; width: max-content;}
.worker_con.apply .status.on {background-color: #fff; border: 1px solid #E32200; color: #E32200; font-family:'NanumSquareNeoExtraBold' !important;}
.worker_con.apply dl {flex-direction: column; align-items: flex-start; justify-content: initial; gap: 15px;}
.worker_con.apply dt {display: flex; align-items: center; gap: 10px;}
.worker_con.apply dd {display: flex; column-gap: 8px; flex-wrap: wrap; align-items: center; row-gap: 4px;}
.worker_con.apply dd span {font-size: 16px; color: #666; padding: 6px 14px; border-radius: 6px; background-color: #eaeaea; line-height: 1; font-weight: 500;}
.worker_con.apply dd p {font-size: 18px;}
.review_box {display: flex; align-items: center; gap: 4px;}
.review_box i {display: block; width: 20px; height: 20px; background: url(../img/star.png) no-repeat center/contain;}
.review p {font-family:'NanumSquareNeoBold' !important; font-size: 16px; color: #555; line-height: 1;}
.review p span {font-family:'NanumSquareNeoExtraBold' !important; color: #111;}



/* 화물등록(화주) */
.step_box {width: 100%; display: flex; justify-content: flex-start; height: 10px; background-color: #f7f7f7;}
.step_box i {display: block; height: 100%; border-radius: 0 10px 10px 0; background: linear-gradient(to right bottom, #E32200, #FF9A52);}
.step_box i.wd3 {width: 33.33%;}
.step_box i.wd6 {width: 66.66%;}
.step_box i.wd10 {width: 100%; border-radius: 0;}

.pg_box {display: flex; align-items: baseline; gap: 4px; padding-bottom: 20px;}
.pg_box em {font-size: 50px; background: linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -webkit-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -moz-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); background: -o-linear-gradient(307deg, #E32200 0%, #FF9A52 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; line-height: 1; display: inline-block;}
.pg_box span {font-size: 20px; color: #999; line-height: 1;}

.period_box {width: 50%;}
.period_box > span {font-size: 16px; color: #666; line-height: 1;}
.input_con.period {position: relative; width: 100%; padding: 25px 0;}
.input_con.period input {width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: transparent; z-index: 2; border-bottom: 1px solid #555;}
.period_list {width: 100%;}
.period_list dl {display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-radius: 50px; border: 1px solid #ddd; background-color: #fff;}
.period_list dl + dl {margin-top: 8px;}
.period_list dt {font-size: 18px; line-height: 1;}
.period_list dd {display: block; width: 25px; aspect-ratio: 1; background: url(../img/delete_period.png) no-repeat center/contain;}

.slt_time {display: flex; align-items: center; gap: 6px; width: 100%;}
.slt_time .slt_box {width: 33.33%;}

.grid_box {width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.grid_box.grid3 {grid-template-columns: 1fr 1fr 1fr; gap: 8px;}

.opt_box {display: flex; flex-wrap: wrap; gap: 8px; width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd;}
.chk_opt input[type="checkbox"] + label {gap: 12px; padding: 15px 18px; display: flex; align-items: center; border-radius: 100px; background-color: #f7f7f7; border: 1px solid #f7f7f7;}
.chk_opt input[type="checkbox"] + label::before, .chk_opt input[type="checkbox"] + label::after {display: none;}
.chk_opt input[type="checkbox"]:checked + label {background-color: #fff; border-color: #E32200;}
.chk_opt input[type="checkbox"] + label i {display: block; width: 24px; aspect-ratio: 1; border-radius: 100%; background: url(../img/chk.png) no-repeat center/contain;}
.chk_opt input[type="checkbox"]:checked + label i {background: url(../img/chk_on.png) no-repeat center/contain;}
.chk_opt input[type="checkbox"] + label span {font-size: 16px; color: #666; line-height: 1;}
.chk_opt input[type="checkbox"]:checked + label span {color: #111;}
.car_amount {width: 100%;}
.amount_con {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.amount_con p {font-size: 18px; line-height: 1;}
.amount_con .input_count {display: flex; align-items: center; gap: 2px; padding: 8px 10px; border-radius: 100px; border: 1px solid #eee;}
.amount_con .input_count i {display: block; width: 30px; aspect-ratio: 1;}
.amount_con .input_count i.minus {background: url(../img/icon_minus.png) no-repeat center/contain;}
.amount_con .input_count i.plus {background: url(../img/icon_plus.png) no-repeat center/contain;}
.amount_con .input_count input[type="number"] {border-bottom: none; padding: 0; width: 40px; text-align: center; font-size: 20px;}
.amount_con + .amount_con {margin-top: 10px;}

.input_con.add_price {position: relative;}
.input_con.add_price span {position: absolute; top: 50%; right: 16px; font-size: 16px; color: #888; line-height: 1; transform: translateY(-50%);}
.input_con.add_price input {padding: 8px 40px 8px 8px; text-align: right; font-family: 'NanumSquareNeoHeavy' !important; font-size: 20px;}

.work_add {width: 100%; position: relative;}
.work_add .auto_list {position: absolute; top: 110%; left: 0; width: 100%; border-radius: 5px; border: 1px solid #555; background-color: #555; overflow: hidden; box-shadow: 0px 2px 8px #00000030; overflow-y: auto; height: 161px; z-index: 10;}
.work_add .auto_list ul {display: flex; width: 100%; flex-direction: column;}
.work_add .auto_list li {width: 100%; padding: 14px 12px; font-size: 16px; font-weight: 500; color: #fff; border-bottom: 1px solid #777; opacity: .7;}
.work_add .auto_list li:hover {background-color: #333; opacity: 1;}




/* ======== 담당자 ======== */
.worker_con {padding: 25px; border-radius: 15px; border: 1px solid #eee; box-shadow: 0 0 10px #00000005; display: flex; flex-direction: column; gap: 15px; width: 100%; background-color: #fff;}
.worker_con dl {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.worker_con dt {font-size: 18px;}
.worker_con dd {font-size: 20px;}
.worker_con .btn_box {display: flex; align-items: center; gap: 8px;}

.docu_status {width: 100%; display: flex; align-items: center; justify-content: space-between;}
.docu_status dt {font-size: 20px; color: #333;}
.docu_status dd {line-height: 1; padding: 8px 12px; border-radius: 100px; background-color: #f7f7f7; border: 1px solid #f7f7f7; color: #888;}
.docu_status.on dd {background-color: #fff; border-color: #19C552; color: #19C552;}


.bt_sheet.slt_apply {display: none;}
.bt_sheet.slt_apply .bt_con.apply_list > span {font-size: 20px;}
input[type="radio"] + label .car_slt {display: flex; align-items: center; gap: 15px;}
input[type="radio"] + label .car_slt span {font-size: 18px;}
.car_slt .count {display: flex; align-items: center; gap: 2px; font-size: 16px; color: #555;}
.car_slt .count em {color: inherit;}
input[type="radio"]:checked + label .car_slt em {color: #E32200;}
.car_list {margin-top: 15px;}
.car_list .radio_con + .radio_con {margin-top: 10px;}


/* ======== 프로필등록 ======== */
.input_item .input_box.personal {display: flex; align-items: center; gap: 6px; flex-direction: row;}
.input_box.personal i {display: block; width: 15px; height: 1px; background-color: #aaa;}



/* ======== 서비스평가 ======== */
.login_title .icon {margin-bottom: 20px;}
.review_con {width: 100%; display: flex; flex-direction: column; gap: 20px;}
.review_con dl {display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 12px;}
.review_con dt {display: flex; align-items: center; gap: 6px; padding: 10px 15px; border-radius: 50px; background-color: #FFF2E7; color: #866662; font-size: 16px; font-weight: 700; line-height: 1;}
.review_con dt i {display: block; width: 20px; height: 20px;}
.review_con dt i.safe {background: url(../img/icon_safe.png) no-repeat center/contain;}
.review_con dt i.time {background: url(../img/icon_time.png) no-repeat center/contain;}
.review_con dt i.kind {background: url(../img/icon_kind.png) no-repeat center/contain;}
.review_con dd {font-size: 18px;}




/* ======== 정산 ======= */
.table dl dd .status_pay.wait {color: #19C552; font-weight: 700;}
.table dl dd .status_pay.done {color: #E32200; font-weight: 700;}








/* ======== 350px ======== */
@media screen and (max-width: 350px) {
    button.lg {font-size: 18px;}
    .view_wrap {gap: 30px;}

    input[type="radio"] + label {padding: 12px 20px;}
    input[type="checkbox"] + label::before {top: -2px; transform: initial;}

    .slt_box {padding: 12px 16px;}
    .slt_box span {font-size: 16px;}
    .slt_time {flex-wrap: wrap; justify-content: space-between; row-gap: 8px;}
    .slt_time .slt_box {width: 48%;}
    .slt_time .slt_box:nth-of-type(1) {width: 100%;}


    /* 메인 */
    .main_txt p {font-size: 20px;}
    .main_txt span {font-size: 20px;}
    .menu_con {padding: 18px 20px;}
    .menu_con dl {gap: 10px;}
    .menu_con dt {width: 30px;}
    .menu_con dd {font-size: 18px;}
    .menu_con i {width: 12px;}
    .menu_con.on dd::after {width: 10px; height: 10px; right: -20px;}
    .alarm_box {gap: 8px;}
    .alarm_box dl {gap: 5px;}
    .alarm_box dt {font-size: 16px;}
    .alarm_box dd {font-size: 15px;}
    .alarm_box i {width: 35px;}


    /* 화물등록내역 */
    .slt_wrap {flex-direction: column; gap: 6px;}
    .work_con {padding: 20px;}
    .work_tit .pay_info {flex-direction: column-reverse; align-items: flex-start; gap: 8px;}
    .work_tit .pay_info dd {font-size: 16px; position: absolute; top: -40px; right: 0;}
    .work_info {gap: 15px;}
    .work_info .top .status {padding: 8px 16px; font-size: 16px;}
    .work_tit .pay_info dt {font-size: 20px;}
    .work_tit .work_dist {flex-direction: column; align-items: flex-start; gap: 10px;}
    .work_tit .work_dist span {font-size: 18px;}
    .work_tit .work_dist span::after {display: none;}
    .work_tit .work_dist span:last-child {font-size: 15px; color: #999;}
    .work_data .work_sch {gap: 10px;}
    .work_sch .sch_con p {font-size: 18px;}
    .work_sch i {width: 20px; height: 20px;}
    .work_sch i::after {width: 8px; height: 8px;}
    .work_data .work_sch:first-child::after {left: 9px;}
    .work_sch .sch_con dt {font-size: 14px;}
    .work_sch .sch_con dd {font-size: 16px;}


    /* 화물상세보기 */
    .work_main {gap: 20px;}
    .table {gap: 10px;}
    .table dl {flex-direction: column; gap: 5px;}
    .table dl dt {font-size: 15px; font-weight: 600; color: #777; width: 100%;}
    .table dl dd {width: 100%;}
    .info_img {font-size: 15px;}
    .pay_info {font-size: 15px; padding-left: 20px;}
    .upload_box .upload_list {grid-template-columns: 1fr 1fr; gap: 12px;}
    .item_box {gap: 20px;}
    .btn_box {flex-direction: column;}
    .table.pay dd p {text-align: left;}


    /* 지원자내역 */
    .worker_con {padding: 20px;}
    .worker_con.apply .status {font-size: 16px; padding: 6px 12px;}
    .worker_con.apply dl {gap: 10px;}
    .worker_con.apply dt {flex-direction: column; align-items: flex-start; gap: 0;}
    .list_sub .amount_txt {font-size: 16px;}
    .item_list {gap: 15px;}
    .worker_con .btn_box {flex-direction: column-reverse;}


    /* 서비스평가 */
    .review_con dt {font-size: 14px; padding: 8px 12px;}
    .review_con dt i {width: 15px; height: 15px;}
    .review_con dd {font-size: 16px;}


    /* 새화물등록 */
    .period_box {width: 100%;}
    .period_list dl {padding: 12px 25px;}
    .period_list dt {font-size: 16px; line-height: 1.4; width: calc(100% - 25px); padding-right: 10px;}
    .grid_box {grid-template-columns: 1fr;}
    .worker_con dl {flex-direction: column;}
    .tab span {font-size: 16px; padding: 8px 0; font-weight: 600;}
    .tab + .slt_wrap {padding-top: 15px !important;}
    .input_con.add_price input {text-align: left;}


    /* 정산 */
    .work_con.pay .work_tit .pay_info dd {position: relative; top: initial; right: initial;}
    .work_info .top {flex-direction: column; align-items: flex-start; gap: 12px;}


    /* 입력폼  */
    .btn_upload {gap: 5px;}
    .btn_upload span {font-size: 14px;}
    .btn_upload i {width: 15px;}
}