@charset "UTF-8";
/* 차량 선택 팝업 */
.pop-select-vhcl {width: 500px;}
.pop-select-vhcl .pop-body {padding: 20px 20px 30px;}
.pop-select-vhcl .lookup {display: flex; gap: 0 40px; justify-content: center;}
.pop-select-vhcl .lookup .search {width: 300px;}
.pop-select-vhcl .list-wrap.v1 {height: 400px;}
.pop-select-vhcl .list-wrap.v1 .btn.sm {line-height: 22px;}

.pop-select-vchl .list-wrap.v1 {
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 20px;
}

.pop-add-destination {
	z-index : 98;
}

.pop-alert01 {
	z-index : 120;
}

.pop-alert02 {
	z-index : 120;
}

.pop-loading {
	z-index : 120;
}

/* 주소검색 팝업 z-index */
.pop-search-address {
	z-index : 130;
}

/* 운전자(차량)선택 팝업 calc(100vh)계산 */
.popup.layer .pop-body.custom-select-worker {overflow: auto; width: 100%; flex: 1 0; min-height: 0; max-height: calc(100vh - 220px);}

/* 업무 완료율 Pie 차트 속성 */
.complete-container div{
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 마우스 드래그 관련 */
.row.dragging {
	opacity: 0.5; /* 반투명 효과 */
    transform: scale(1.05); /* 살짝 확대 */
    transition: transform 0.2s ease-out;
}

.row.over {
	border-top: 2px solid blue;  /* 드롭할 위치 표시 */
    transition: border-top 0.2s ease-in-out;
}

/* */
.dropdown.v1 .txt-pick.btn-disable {
	background: #ebebeb;
}

#popup-excelupload-tbody input[name="excelDelivName"]::placeholder,
#popup-excelupload-tbody input[name="excelInputAddress"]::placeholder,
#popup-excelupload-tbody input[name="excelOrderName"]::placeholder {
    color:red;
}


/* 업로드 완료 팝업 */
.pop-complete-upload2 {width: 100%; top: 480px !important; height: 850px !important;}
.pop-complete-upload2 .pop-body {padding-top: 20px; padding-bottom: 20px; max-height: calc(100vh - 50px) !important;}

.pop-complete-upload2 .list-wrap.v1 {height: 557px;}
.pop-complete-upload2 .list-wrap.v1 .list-head {width: 100%; overflow: hidden;}
.pop-complete-upload2 .list-wrap.v1 table {min-width: 3640px;}


/***** datepicker css[S] *****/
/* [기존 유지] 공통 스타일 */
.ui-datepicker {
	border: 1px solid #CED4DA !important;
	box-shadow: 0px 4px 10px 0px #0000001A;
	width: 345px;
	border-radius: 10px;
	background-color: #F8F9FA;
	padding: 0;
	overflow: hidden;
	font-family: 'Pretendard';
}

/* 생략: header, calendar 기본 셋팅 등 */

/* --- 날짜 셀 스타일 --- */

/* 공통 셀 초기화 */
.ui-datepicker .ui-datepicker-calendar tbody tr td > span,
.ui-datepicker .ui-datepicker-calendar tbody tr td > a {
	display: block;
	width: 32px;
	line-height: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 400;
	text-align: center;
	border: 0;
	background-color: transparent;
	padding: 0;
	color: #343A40;
	margin: 0 auto;
}

/* --- 선택된 날짜 스타일 --- */
.ui-datepicker .ui-datepicker-calendar tbody tr td > a.ui-state-active {
	background-color: #4C6EF5;
	color: #ffffff;
	font-weight: 600;
}

/* --- 오늘 날짜 스타일 (선택 X) --- */
.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today > a:not(.ui-state-active) {
	border: 1px dashed #ADB5BD;
	box-sizing: border-box;
	border-radius: 50%;
	color: #000000;
}

/* --- 오늘 날짜 스타일 (선택 O) — 강조 제거 후 점선만 --- */
/*
.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today > a.ui-state-active {
	background-color: transparent !important;
	color: #343A40 !important;
	border: 1px dashed #ADB5BD !important;
	box-sizing: border-box;
	border-radius: 50%;
	font-weight: 600;
}
*/

/* 오늘 날짜: 무조건 연한 파란 배경 + 점선 테두리 (기존의 문제였던것) */
/*
.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today > a {
	background-color: #E0ECFF !important;
	border: 1px dashed #ADB5BD !important;
	color: #343A40 !important;
	box-sizing: border-box;
	border-radius: 50%;
	font-weight: 400;
}
*/
/* 오늘 날짜 + 선택된 상태인 경우 → 배경 제거, 점선만 유지
.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today > a.ui-state-active {
	background-color: transparent !important;
	color: #343A40 !important;
}
 */
 
/* 오늘 날짜 + 선택된 경우: 색 덮기 없이 점선 + 텍스트만 강조 */
/*
.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today > a.ui-state-active {
	background-color: #228BE6;
	font-weight: 600;
}
*/

/* 일반 선택된 날짜 (오늘 제외) */
.ui-datepicker .ui-datepicker-calendar tbody tr td:not(.ui-datepicker-today) > a.ui-state-active {
	background-color: #4C6EF5;
	color: #ffffff;
	font-weight: 600;
}

/* 오늘 날짜 + 선택된 상태 → 점선만 (이전처럼 유지) */
.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today.selected-is-today > a.ui-state-active {
	background-color: transparent !important;
	border: 1px dashed #ADB5BD !important;
	color: #343A40 !important;
}

/* 오늘 날짜 (선택 안 됨) → 연한 배경 + 점선 */
/*
.ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-today > a {
	background-color: #0080ff;
	border: 1px dashed #ADB5BD;
	color: #ffffff;
}
*/

/***** datepicker css[E] *****/
/**************************************************/
/* summary는 세로 배치 */
.article.charge-area .summary {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 30px !important;
}

/* 첫 번째 청구요금 블록 - 가로 배치로 변경! */
.article.charge-area .summary .first-charge {
    display: flex !important;
    flex-direction: row !important;  /* column에서 row로 변경 */
    align-items: center !important;   /* flex-start에서 center로 변경 */
    gap: 20px !important;             /* 15px에서 20px로 변경 */
}

.article.charge-area .summary .first-charge .month {
    font-size: 24px !important;
    line-height: 1.20834 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.article.charge-area .summary .first-charge .price {
    margin: 0 !important;
}

.article.charge-area .summary .first-charge .price .value {
    margin: 0 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1E6AE1 !important;
}

.article.charge-area .summary .first-charge button {
    margin: 0 !important;  /* margin-top 제거 */
    margin-left: 100px !important;
}

/* 두 번째 청구요금 블록 - 가로 배치 */
.article.charge-area .summary .second-charge {
    display: flex !important; /* 추후 flex로 변경  */
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
}

.article.charge-area .summary .second-charge .month {
    font-size: 24px !important;
    line-height: 1.20834 !important;
    font-weight: 700 !important;
    margin: 0 !important;
    white-space: nowrap !important;
}

.article.charge-area .summary .second-charge .price {
    margin: 0 !important;
}

.article.charge-area .summary .second-charge .price .value {
    margin: 0 !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1E6AE1 !important;
    white-space: nowrap !important;
}
/**************************************************/

input[type="email"] {width: 100%; display: block; height: 32px; border-radius: 8px; border: 1px solid #CED4DA; padding: 0 20px; font-size: 12px;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.cancel-pop-td {
	font-size: 12px;
    font-weight: 600;
    height: 40px;
    vertical-align: middle;
    padding: 0 10px;
}

/* 환불 약관 팝업 */
.terms-popup2 {flex-direction: column; max-height: calc(100vh - 90px); border-radius: 20px;}
.terms-popup2 .terms-area {width: 1200px; height: 700px; background-color: #ffffff; border-radius: 20px; padding: 20px 0 10px; margin: 30px auto 0}
.terms-popup2 .terms-area .tab-wrap.v3 .tab-cont-wrap .tab-cont[style="display: block;"] {display: flex !important; flex-direction: column; align-content: center; justify-content: center;}
.terms-popup2 .terms-area .terms {flex: 1 0; min-height: 0;}
.terms-popup2 .terms-area .terms .text01 {font-size: 16px; line-height: 1.625; font-weight: 700; letter-spacing: -0.02em;}
.terms-popup2 .terms-area .terms .text02 {font-size: 12px; line-height: 1.667; color: #868E96; letter-spacing: -0.02em;}
.terms-popup2 .terms-area .terms .text03 {font-size: 12px; line-height: 1.667; color: #343A40; letter-spacing: -0.02em;}
.terms-popup2 .terms-area .btn-terms-prev {background: #ffffff url('../img/icon/ic_convey_default.png') no-repeat right 20px center; background-size: 16px; border: 1px solid #CED4DA; border-radius: 8px; padding: 0 20px; height: 32px; width: 260px; text-align: left; font-size: 12px;}
/* (임시)이전 약관 보기 삭제로 인해 닫기 버튼 우측 하단 고정*/
.terms-popup2 .terms-area .tempClose {justify-content: flex-end !important;}

/*환불 확인 팝업 */
.pop-select-dispatch2 {width: 850px;}
.pop-select-dispatch2 .pop-body {padding: 20px 25px;}
.pop-select-dispatch2 .text-area {background-color: #F8F9FA; border-radius: 10px; padding: 25px 0;}
.pop-select-dispatch2 .text-area .text {font-size: 14px; font-weight: 700; line-height: 1.215; text-align: center;}
.pop-select-dispatch2 .dispatch-type {margin-top: 20px; display: flex; align-items: stretch; gap: 0 10px;}
.pop-select-dispatch2 .dispatch-type dl {flex: 1 0; display: flex; flex-direction: column; align-items: stretch; overflow: hidden; border-radius: 10px; border: 1px solid #E9ECEF;}
.pop-select-dispatch2 .dispatch-type dl dt,
.pop-select-dispatch2 .dispatch-type dl dd {width: 100%;}
.pop-select-dispatch2 .dispatch-type dl dt {padding: 12px 20px;}
.pop-select-dispatch2 .dispatch-type dl dt .title {font-size: 12px; color: #ffffff; line-height: 1.25; justify-self: center;}
.pop-select-dispatch2 .dispatch-type dl dd {padding: 20px 20px;}
.pop-select-dispatch2 .dispatch-type dl dd .text {font-size: 11px; line-height: 1.364; color: #868E96; word-break: keep-all;}
.pop-select-dispatch2 .dispatch-type dl dd .btn {width: 100%; margin-top: 20px;}

.pop-select-dispatch2 .dispatch-type dl:nth-child(1) dt {background-color: #4DABF7;}
.pop-select-dispatch2 .dispatch-type dl:nth-child(2) dt {background-color: #DA77F2;}
.pop-select-dispatch2 .dispatch-type dl:nth-child(3) dt {background-color: #FF6B6B;}

/**************************************************/
.list-wrap.v5.has-check .check-row {user-select: none;}
.list-wrap.v5 .list-body .row.exceed {background-color: #ffe1e1; color: #b30000;}
.tbl-wrap.v4 table .section-row td {background-color: #f5f6f8; font-weight: 600;}
.pop-dispatch-automatic #datum-detail-exceed {width: 470px;}
.flexible-zone-notice {display: none; font-size: 12px; color: #0a6cf7;}

/* [자동배차 옵션] 다회차 - 전체 차량(값=1)일 때 한 줄 레이아웃 */
.multi-trip-inline {display: flex; align-items: center; gap: 8px;}
.multi-trip-inline > #select-multi-trip-scope {width: 60%;}
.multi-trip-inline > .inp-wrap {width: 40%;}
.multi-trip-inline > .inp-wrap.mt4 {margin-top: 0 !important;}
.multi-trip-inline #select-multi-trip-count {width: 100%;}

.vhcl-active {border: 2px solid #ff9800 !important; border-radius: 6px; box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.25);}
.order-active {border: 2px solid #ff9800 !important; border-radius: 6px; box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.25);}
/* [자동배차 결과] 운전자 목록 검색 — 검색 기준(운전자/배송지·물품) + 검색어 결합 입력
   팔레트는 사이트 공통(Open Color): 포커스 indigo #4C6EF5, 검색 일치 yellow #FAB005 계열(지도 hover 주황 #ff9800과 구분) */
.result-search-wrap {padding-bottom: 12px;}
.result-search {display: flex; align-items: center; gap: 0 8px; margin-top: 8px;}
.result-search .search-combo {position: relative; flex: 1 0; min-width: 0; display: flex; align-items: center; height: 32px; border: 1px solid #CED4DA; border-radius: 8px; background-color: #ffffff; overflow: hidden; transition: border-color .15s, box-shadow .15s;}
.result-search .search-combo:hover {border-color: #ADB5BD;}
.result-search .search-combo:focus-within {border-color: #4C6EF5; box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.12);}
.result-search .search-combo select {flex: none; width: 108px; height: 100%; border: 0; border-right: 1px solid #E9ECEF; border-radius: 0; background: #F8F9FA url('../img/icon/ic_arr_select_default.png') no-repeat right 10px center; background-size: 14px; padding: 0 28px 0 12px; font-size: 12px; font-weight: 600; color: #495057; cursor: pointer; outline: none;}
.result-search .search-combo select:hover {background-color: #F1F3F5;}
.result-search .search-combo input[type="text"] {flex: 1 0; min-width: 0; width: auto; height: 100%; border: 0; border-radius: 0; padding: 0 62px 0 12px; text-overflow: ellipsis; outline: none;}
.result-search .search-combo input[type="text"]::placeholder {color: #ADB5BD;}
.result-search .search-combo .btn-search {position: absolute; right: 12px; top: calc(50% - 8px);}
.result-search .search-combo .btn-clear-search {position: absolute; right: 36px; top: calc(50% - 8px); width: 16px; height: 16px; border: 0; border-radius: 50%; background-color: #CED4DA; color: #ffffff; font-size: 0; cursor: pointer; padding: 0;}
.result-search .search-combo .btn-clear-search::before {content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; background: #ffffff; transform: translate(-50%, -50%) rotate(45deg);}
.result-search .search-combo .btn-clear-search::after {content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 1.5px; background: #ffffff; transform: translate(-50%, -50%) rotate(-45deg);}
.result-search .search-combo .btn-clear-search:hover {background-color: #868E96;}
.result-search .btn-refresh {flex: none;}
.result-search-status {display: flex; align-items: center; gap: 0 6px; min-height: 18px; margin-top: 6px; font-size: 11px; line-height: 1.4; color: #868E96;}
.result-search-status .keyword {display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; color: #343A40; font-weight: 600;}
.result-search-status strong {color: #4C6EF5; font-weight: 700;}
.result-search-status .btn-status-clear {margin-left: auto; border: 0; background: none; padding: 0; font-size: 11px; color: #868E96; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;}
.result-search-status .btn-status-clear:hover {color: #4C6EF5;}
#drv-list .no-data {display: flex; align-items: center; justify-content: center; padding: 28px 0;}
#drv-list .no-data p {border: 1px dashed #CED4DA; width: 185px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.182; color: #868E96; padding: 32px 0; border-radius: 20px;}
.search-match-badge {display: inline-flex; align-items: center; height: 18px; margin-left: 4px; padding: 0 7px; border-radius: 9px; background: #FFF3BF; color: #E67700; font-size: 11px; font-weight: 600; white-space: nowrap; vertical-align: middle;}
.list-wrap.v5 .list-body .check-row .row.search-match {background-color: #FFF9DB; border-color: #FFE066; box-shadow: inset 3px 0 0 #FAB005;}
mark.search-mark {background: #FFE066; color: inherit; border-radius: 2px; padding: 0 1px;}

/*배송지 등록 - 직접 등록 : 선택 불가한 시간 클릭 불가 + 글자 색상 회색 처리 (ul의 하위 li에 적용)*/
.directDeliv_timeWindow_disabled {pointer-events: none; color: #ccc;}
/*배송지 등록 - 직접 등록 : 선택된 옵션 파란색 글자 처리*/
.directDeliv_timeWindow_selected {color: blue;}
/*배송지 등록 - 엑셀 등록 : 선택 불가한 시간 클릭 불가 + 글자 색상 회색 처리*/
option.option-disabled {color: #ccc;}
/*배송지 등록 - 엑셀 등록 : 선택된 옵션 파란색 글자 처리*/
option.option-selected{color: blue;}

.form-head {align-items: center; gap: 0 8px; display: flex; justify-content: space-between;}

/* 자동배차옵션 - 비용 관련(배송지당/거리당/시간당) 입력 필드 통일 */
.inp-item-cost {display: flex; align-items: center; gap: 12px;}
.inp-item-cost .txt {min-width: 90px; flex-shrink: 0;}
.inp-item-cost .has-unit {flex: 1; min-width: 0;}
.inp-item-cost .has-unit input {width: 100%;}

/* 자동배차옵션 - 균등화 옵션 i 태그 추가 목적 */
.even-option-checkbox {font-weight: normal !important; display: flex; align-items: center; gap: 6px;}
.even-option-checkbox label {display: flex; align-items: center; margin: 0;}
.even-option-checkbox label p {display: inline; margin: 0; white-space: nowrap;}
.even-option-checkbox .ic-tooltip {display: inline-block; flex-shrink: 0;}

/* [2026-05 UI 리디자인] 출발·목적지 체크박스 표식 복원.
   기존엔 '필수값'이라 표식을 display:none 했으나, 다른 옵션과 통일성 위해 체크박스를 노출한다.
   (값은 JS lockAlwaysCheckedRouteType로 항상 checked 고정 → optionRouteType 현행 동일) */

/* 초과 상세 패널 - 이전/다음 운전자 네비게이션 버튼 */
.exceed-nav-wrap {display: flex; align-items: center; gap: 4px; margin-left: auto;}
.btn-exceed-prev {width: 24px; height: 24px; background: url('../img/icon/ic_swiper_l.png') no-repeat center center; background-size: 16px 16px; border: 1px solid #CED4DA; border-radius: 4px; cursor: pointer; transition: background-color 0.2s;}
.btn-exceed-next {width: 24px; height: 24px; background: url('../img/icon/ic_swiper_r.png') no-repeat center center; background-size: 16px 16px; border: 1px solid #CED4DA; border-radius: 4px; cursor: pointer; transition: background-color 0.2s;}
.btn-exceed-prev:hover, .btn-exceed-next:hover {background-color: #F1F3F5;}
.btn-exceed-prev:disabled, .btn-exceed-next:disabled {opacity: 0.4; cursor: not-allowed;}

/*배송지 연동 - 뒤로 아이콘*/
.ic-api-back {width: 16px; height: 16px; background-image: url('../img/icon/ic_api_back.png');}

/*엑셀 등록 에러 항목 표시*/
.input-error {
    background-color: #ffdddd !important;
    border: 1px solid #ff4d4d !important;
}

/* 임시 체험 계정 정식 전환 팝업 */
.pop-trial-conversion .pop-body {padding: 40px 40px;}
/* 비밀번호 input 우측 눈 아이콘 위치 — form-cont 너비를 input(w260=260px)과 동일하게 맞춰 input 박스 내부 우측 배치 */
.pop-trial-conversion .form-cont {position: relative;}
.pop-trial-conversion .form-cont:has(> .btn-view) {width: 260px;}

/* ============================================================
   자동배차 옵션 UI 리디자인 — 표현 계층 공통 컴포넌트
   (값 계층은 기존 컨트롤 hidden 유지. 아래는 표시 전용)
   스코프: #option-area(옵션화면) / .pop-modify-set(재배차 팝업)
   ============================================================ */

/* 옵션 패널 셀 세로 중앙 정렬.
   REGRESSION: .tbl-wrap.v2 td는 vertical-align 미지정(=baseline). 라벨에 아이콘(22px)이
   추가되며 좌측 셀 baseline이 올라가, baseline 정렬된 우측 슬라이더 셀(짧음)이 아래로 쳐져 보였음.
   middle로 고정해 좌(라벨)·우(슬라이더 숫자+막대)가 행 중앙에 나란히 정렬되도록 보정. */
#option-area .tbl-wrap.v2 table tbody tr td,
.pop-modify-set .tbl-wrap.v2 table tbody tr td {vertical-align: middle;}

/* 옵션 라벨 앞 아이콘 박스 (색 박스 = CSS 배경 틴트, 글리프 = 색 박힌 SVG) */
#option-area .opt-ico,
.pop-modify-set .opt-ico {display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; vertical-align: middle;}
#option-area .opt-ico img,
.pop-modify-set .opt-ico img {width: 15px; height: 15px; display: block;}
/* 경로 패널 텍스트 글리프 임시 아이콘 (Tabler 미지정분) */
#option-area .opt-ico.glyph,
.pop-modify-set .opt-ico.glyph {font-size: 13px; font-weight: 700; line-height: 1;}

/* 아이콘이 들어간 check/radio 라벨 정렬.
   CONTRACT: 체크/라디오 표식(::before)은 label 좌측 absolute(left:0)로 그려지고,
   그 자리는 label 자체의 padding-left:22px로 확보한다. 그 뒤에 [아이콘][텍스트]가 온다.
   (이전 버그: label을 flex로 만들고 p의 padding을 0으로 지워 ::before가 아이콘에 가려져
    체크박스가 안 보였음 — 특히 항상 checked인 출발·목적지에서 두드러짐) */
#option-area .check.v1 label:has(.opt-ico),
#option-area .radio.v1 label:has(.opt-ico),
.pop-modify-set .check.v1 label:has(.opt-ico),
.pop-modify-set .radio.v1 label:has(.opt-ico) {display: inline-flex; align-items: center; gap: 6px; padding-left: 22px; position: relative;}
/* 표식 자리는 label padding이 확보하므로 p는 추가 padding 불필요(중복 들여쓰기 방지) */
#option-area .check.v1 label:has(.opt-ico) p,
#option-area .radio.v1 label:has(.opt-ico) p,
.pop-modify-set .check.v1 label:has(.opt-ico) p,
.pop-modify-set .radio.v1 label:has(.opt-ico) p {padding-left: 0;}
/* ::before 표식이 아이콘 위에 확실히 보이도록 z-index 부여 (absolute left:0 위치는 components.css 원본 유지) */
#option-area .check.v1 input[type="checkbox"] + label:has(.opt-ico)::before,
#option-area .radio.v1 input[type="radio"] + label:has(.opt-ico)::before,
.pop-modify-set .check.v1 input[type="checkbox"] + label:has(.opt-ico)::before,
.pop-modify-set .radio.v1 input[type="radio"] + label:has(.opt-ico)::before {z-index: 1;}


/* 옵션 헤더 아이콘 — 색 채운 원형 + 흰 글리프 (기획 통일 목업) */
#option-area .title-area > .opt-head-ico,
.pop-modify-set .title-area > .opt-head-ico {width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;}
#option-area .title-area > .opt-head-ico img,
.pop-modify-set .title-area > .opt-head-ico img {width: 16px; height: 16px; display: block;}

/* 옵션 단위 툴팁 트리거 (라벨 우측 정보 아이콘) */
#option-area .opt-tip,
.pop-modify-set .opt-tip {cursor: help;}
#option-area .opt-tip.opt-btn,
.pop-modify-set .opt-tip.opt-btn {cursor: pointer;}
/* i.ic-tooltip: inline은 width/height 무시 → inline-block 강제 + 32x33 png를 16px 박스에 맞춤(좌상단 1/4 잘림 방지) */
#option-area i.opt-tip.ic-tooltip,
.pop-modify-set i.opt-tip.ic-tooltip {display: inline-block; flex-shrink: 0; vertical-align: middle; background-size: contain; background-repeat: no-repeat; background-position: center;}
/* 라벨 + 정보아이콘을 한 줄로 정렬 (check/radio 컨테이너를 행 배치) */
#option-area .check.v1:has(> .opt-tip),
#option-area .radio.v1:has(> .opt-tip),
.pop-modify-set .check.v1:has(> .opt-tip),
.pop-modify-set .radio.v1:has(> .opt-tip) {display: flex; align-items: center; gap: 4px; width: fit-content;}
/* 권역 4-라디오: 항상 세로 4줄 */
#option-area .opt-region-group,
.pop-modify-set .opt-region-group {display: flex; flex-direction: column; align-items: flex-start;}

/* 옵션 툴팁 팝업 — 흰 카드 + 이미지(좌) / 문구(우) 2단 (목업 pn-popover 스타일) */
.ui-tooltip.opt-tip-tooltip {max-width: 560px; padding: 0; background: transparent; border: 0; box-shadow: none; font-size: 13px; line-height: 1.5; z-index: 9999;}
.ui-tooltip.opt-tip-tooltip .ui-tooltip-content {padding: 0;}
.ui-tooltip.opt-tip-tooltip .opt-tip-pop {display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #E0DDF7; border-radius: 12px; padding: 14px; box-shadow: 0 4px 12px rgba(80,71,179,.12);}
/* 이미지 박스 (좌) — 320x200(16:10). 이미지 내 글자 가독성 위해 확대 */
.ui-tooltip.opt-tip-tooltip .opt-tip-pop img {flex: 0 0 auto; width: 320px; height: 200px; object-fit: contain; background: #F5F3FE; border-radius: 8px; padding: 8px; box-sizing: border-box;}
/* 문구 (우) */
.ui-tooltip.opt-tip-tooltip .opt-tip-pop p {flex: 1 1 auto; min-width: 0; margin: 0; font-size: 14px; color: #5F5E5A; white-space: normal; word-break: keep-all;}
/* 이미지 없는(문구 전용) 툴팁은 폭 축소 */
.ui-tooltip.opt-tip-tooltip .opt-tip-pop:not(:has(img)) {max-width: 240px;}

/* 버튼/pill 그룹 (select 대체) — 값은 data-sync-target select가 보관 */
#option-area .opt-btn-group,
.pop-modify-set .opt-btn-group {display: flex; flex-wrap: wrap; gap: 6px;}
/* .whether 직속(미들여쓰기) 버튼 그룹은 라벨 텍스트 기준 22px 들여쓰기 (다른 그룹은 .target 내부라 이미 들여쓰기됨) */
#option-area .opt-btn-group[data-sync-target="select-compat-mode"],
#option-area .opt-btn-group[data-sync-target="select-rest-scope"],
.pop-modify-set .opt-btn-group[data-sync-target="select-compat-mode"],
.pop-modify-set .opt-btn-group[data-sync-target="select-rest-scope"] {margin-left: 22px;}
#option-area .opt-btn,
.pop-modify-set .opt-btn {padding: 1px 9px; border: 1px solid #CED4DA; border-radius: 16px; background: #fff; font-size: 12px; line-height: 1.3334; color: #868E96; cursor: pointer; transition: all .15s; white-space: nowrap;}
#option-area .opt-btn:hover,
.pop-modify-set .opt-btn:hover {border-color: #748FFC;}
#option-area .opt-btn.active,
.pop-modify-set .opt-btn.active {background: #4C6EF5; border-color: #4C6EF5; color: #fff;}
/* 비활성 그룹: 흐리게 표시하되 pointer-events는 유지(hover 툴팁 노출 위해).
   클릭으로 값 변경은 JS setupOptionButtonWrappers 핸들러가 차단함. */
#option-area .opt-btn-group.disabled,
.pop-modify-set .opt-btn-group.disabled {opacity: .4;}
#option-area .opt-btn-group.disabled .opt-btn,
.pop-modify-set .opt-btn-group.disabled .opt-btn {cursor: not-allowed;}
#option-area .opt-btn:disabled,
.pop-modify-set .opt-btn:disabled {opacity: .4; cursor: not-allowed;}

/* 숨은 값 계층 select (버튼/pill로 대체된 것) */
#option-area select[hidden],
.pop-modify-set select[hidden] {display: none !important;}

/* ============================================================
   자동배차 옵션 헤더 — 선택 옵션 태그 바 + 옵션 초기화 (기획 2026-07-21)
   스코프: .option-toggle-head (옵션화면·재배차 팝업 공통)
   ============================================================ */
/* width:100% 필수 — 부모 .container가 wrap 컬럼 flex(style.css:920·1067)라 폭 auto면 태그 콘텐츠가
   라인 폭을 밀어 올려 #option-area까지 같이 넓어짐 (.bx-area width:100%와 동일한 고정 방식) */
.option-toggle-head {display: flex; align-items: center; gap: 0 10px; min-height: 28px; width: 100%;}
.option-toggle-head .tit.v3 {flex-shrink: 0;}
.option-toggle-head .btn-option-toggle {flex-shrink: 0;}
.option-toggle-head .btn-opt-reset {flex-shrink: 0; padding: 3px 12px; border: 1px solid #748FFC; border-radius: 14px; background: #ffffff; font-size: 12px; font-weight: 600; line-height: 1.3334; color: #4C6EF5; cursor: pointer; transition: all .15s;}
.option-toggle-head .btn-opt-reset:hover {background: #EDF2FF;}

/* 태그 바: 남는 폭 전부 사용 + 내부 가로 스크롤 (화살표는 넘칠 때만 노출) */
.option-toggle-head .opt-tag-bar {display: flex; align-items: center; gap: 0 4px; flex: 1 1 auto; min-width: 0;}
.option-toggle-head .opt-tag-scroll {display: flex; align-items: center; gap: 0 6px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 2px 0;}
.option-toggle-head .opt-tag-scroll::-webkit-scrollbar {display: none;}
.option-toggle-head .opt-tag-nav {display: none; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #CED4DA; border-radius: 50%; background: #ffffff; font-size: 8px; line-height: 1; color: #868E96; cursor: pointer; align-items: center; justify-content: center; padding: 0; transition: all .15s;}
.option-toggle-head .opt-tag-bar.scrollable .opt-tag-nav {display: inline-flex;}
.option-toggle-head .opt-tag-nav:hover {border-color: #748FFC; color: #4C6EF5;}
.option-toggle-head .opt-tag-nav:disabled {opacity: .3; cursor: default;}

/* 개별 태그 — 패널 헤더 아이콘(.opt-head-ico) 색 계열의 연한 틴트(카테고리 식별).
   해제 불가 태그(.fixed — 항상 on·택1 라디오)도 패널 색을 따르고 X 유무로만 구분.
   배차·비용은 헤더 색이 원래 동일(#1D9E75)이라 태그 색도 동일. 미분류는 기본(파랑) fallback */
.option-toggle-head .opt-tag {display: inline-flex; align-items: center; gap: 0 5px; flex-shrink: 0; padding: 2px 8px; border: 1px solid #BAC8FF; border-radius: 14px; background: #EDF2FF; font-size: 12px; line-height: 1.3334; color: #4263EB; white-space: nowrap;}
.option-toggle-head .opt-tag .val {font-weight: 600;}
.option-toggle-head .opt-tag.opt-tag-route {border-color: #D8CFFF; background: #F1EEFF; color: #6247D9;}
.option-toggle-head .opt-tag.opt-tag-dispatch,
.option-toggle-head .opt-tag.opt-tag-cost {border-color: #BEE5D6; background: #E6F5EF; color: #17805F;}
.option-toggle-head .opt-tag.opt-tag-zone {border-color: #CFCAEE; background: #EDEBF8; color: #534AB7;}
.option-toggle-head .opt-tag.opt-tag-delivery {border-color: #F7DFB4; background: #FDF3E2; color: #B77414;}
.option-toggle-head .opt-tag.opt-tag-driver {border-color: #D6D3F2; background: #F0EFFB; color: #5F55C7;}
.option-toggle-head .opt-tag-remove {display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .08); font-size: 11px; line-height: 1; color: inherit; cursor: pointer; padding: 0;}
.option-toggle-head .opt-tag-remove:hover {background: rgba(0, 0, 0, .18);}

/* 자동배차 운전자 목록 — 카운트·페이지사이즈를 소속 필터 라인으로 통합 (기획 2026-07-21, 옵션화면·재배차팝업 공통) */
.pop-dispatch-automatic .driver-list-controls,
.pop-modify-set .driver-list-controls {display: flex; align-items: center; gap: 0 20px; margin-right: auto; padding-left: 20px;}
.pop-dispatch-automatic .driver-list-controls .txt-count,
.pop-modify-set .driver-list-controls .txt-count {font-size: 12px; font-weight: 600; line-height: 1.3334; color: #868E96;}
.pop-dispatch-automatic .driver-list-controls .txt-count strong,
.pop-modify-set .driver-list-controls .txt-count strong {display: inline-block; line-height: 1.3334; color: #343A40; padding-left: 2px;}
.pop-trial-conversion .form-cont > .btn-view {position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}


/* ==========================================================================
   미종료 운행 정리 팝업 (S2)
   목록 건수·탭과 무관하게 팝업 크기를 고정한다.
   팝업(플렉스 컨테이너)에 높이를 주고 안쪽 체인을 flex로 이어 목록이 남는 높이를 전부 채우게 한다.
   높이를 pop-body에 주면 flex:1 0 계산에 밀려 무시되고,
   안쪽 체인을 flex로 잇지 않으면 pop-foot 아래에 빈 공간이 생긴다
   ========================================================================== */
/* 높이는 팝업(플렉스 컨테이너)에 준다.
   pop-body는 .popup.layer .pop-body {flex: 1 0} 이라 height를 줘도 flex 계산에 밀린다 */
.popup.layer.pop-unfinished-task {height: calc(100vh - 160px); min-height: 620px;}
/* 기존 .popup.layer .pop-body {max-height: calc(100vh - 350px)} 가 성장을 막아
   팝업 높이(100vh-160px)와 차이만큼 pop-foot 아래에 빈 공간이 생긴다. 이 팝업에서만 해제 */
.popup.layer.pop-unfinished-task .pop-body {max-height: none; min-height: 0; overflow: hidden;}
/* 탭·기간 영역이 불필요하게 높지 않도록 여백을 줄인다 */
/* 팝업 배경이 흰색이라 bx-area의 흰 박스가 시각적으로 드러나지 않는다 —
   기본 여백(패딩 20px·박스 간 마진 10px)이 과하므로 이 팝업 스코프에서만 조정.
   탭 줄(fx-none)은 숨 쉴 여백을 남기고, 목록 영역은 패딩을 없애 표를 최대한 넓게 쓴다 */
.pop-unfinished-task .pop-body .bx-area.fx-none {padding-top: 12px; padding-bottom: 12px;}
.pop-unfinished-task .pop-body .bx-area:not(.fx-none) {padding-top: 0; padding-bottom: 0;}
.pop-unfinished-task .pop-body .bx-area + .bx-area {margin-top: 0;}
.pop-unfinished-task .pop-body .bx-area.fx-none .inp-wrap.mt10 {margin-top: 8px;}
/* 공통 .check.v1에는 disabled 시각 상태가 없어 완료·취소된 배송지의 체크박스가 클릭 가능한 것처럼 보인다.
   전용 disabled 아이콘(ic_check01)도 없으므로 흐림 처리로 대신한다 — 이 팝업 스코프 한정 */
.pop-unfinished-task .check.v1 input[type="checkbox"]:disabled + label {opacity: 0.35; cursor: not-allowed;}
.pop-unfinished-task .pop-body > .contents {height: 100%; background-color: transparent;}
.pop-unfinished-task .pop-body > .contents > .container {height: 100%; display: flex; flex-direction: column; min-height: 0; padding-left: 0; padding-right: 0;}
.pop-unfinished-task .pop-body .bx-area.fx-none {flex: 0 0 auto;}
.pop-unfinished-task .pop-body .bx-area:not(.fx-none) {flex: 1 0; min-height: 0; display: flex; flex-direction: column;}
.pop-unfinished-task .pop-body .bx-area:not(.fx-none) > .inner {flex: 1 0; min-height: 0; display: flex; flex-direction: column;}
.pop-unfinished-task .list-wrap.v1 {flex: 1 0; min-height: 0; display: flex; flex-direction: column;}
.pop-unfinished-task .list-wrap.v1 .list-head {flex: 0 0 auto;}
.pop-unfinished-task .list-wrap.v1 .list-body {flex: 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden;}
.pop-unfinished-task .paging {flex: 0 0 auto; margin-top: 12px; padding-bottom: 0;}

/* 전용 배경. 공용 .dim은 다른 팝업이 닫힐 때 dimRemove()로 통째로 제거되므로
   (모니터링 조회 로딩이 끝나면 hideLoadingPopup -> popCloseAndDim -> dimRemove) 별도 클래스를 쓴다 */
.unfinished-dim {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #000000; opacity: 0.5; z-index: 97;}

/* 공통 월기간 달력 css
   components.css의 .priod / .one-form 기본 모양을 그대로 사용하고 월달력 전용 동작만 보완 */
.month-priod {position: relative;}
.month-priod .month-range-trigger {cursor: pointer; user-select: none;}
.month-priod .month-range-trigger.active {border-color: #868E96;}
.month-priod .month-range-trigger .month-date01,
.month-priod .month-range-trigger .month-date02 {pointer-events: none; color: #343A40;}
.month-priod .month-range-trigger .split {pointer-events: none; color: #868E96;}

.month-range-layer {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 10000;
    width: 460px;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid #CED4DA;
    border-radius: 10px;
    background-color: #F8F9FA;
    box-shadow: 0px 4px 10px 0px #0000001A;
    font-family: 'Pretendard';
}

.month-range-guide {margin: 0 0 16px; color: #FF922B; font-size: 11px; font-weight: 600; line-height: 1.182;}
.month-range-head {display: grid; grid-template-columns: 20px 1fr 1fr 20px; align-items: center; gap: 0 20px; margin-bottom: 14px;}
.month-range-year {font-size: 12px; font-weight: 700; line-height: 1.334; color: #212529; text-align: center;}
.month-range-nav {position: static !important; margin: 0;}
.month-range-panels {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; width: 100%;}
.month-range-months {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; min-width: 0;}
.month-range-item {height: 32px; padding: 0; border: 0; border-radius: 16px; background-color: transparent; color: #343A40; font-family: 'Pretendard'; font-size: 12px; font-weight: 400; cursor: pointer;}
.month-range-item:hover:not(:disabled) {background-color: #E9ECEF;}
.month-range-item.is-range {border-radius: 4px; background-color: #EDF2FF; color: #343A40;}
.month-range-item.is-start,
.month-range-item.is-end {background-color: #4C6EF5; color: #FFFFFF; font-weight: 600;}
.month-range-item.is-current:not(.is-start):not(.is-end) {border: 1px dashed #ADB5BD; box-sizing: border-box;}
.month-range-item.is-disabled,
.month-range-item:disabled {color: #CED4DA; background-color: transparent; cursor: default;}

/* 알림톡 발송내역 새로고침 버튼 영역 보완  */
.btn-ic.btn-refresh.alarmtalk-history-refresh {
    margin: 4px;
}

/* 자동배차 서버 주도 처리 — 진행 중·최근 종료 요청 안내 띠(옵션 화면 상단). 배치·톤은 기획 확인 전 초안 */
/* 자동배차 옵션·결과 화면 — 서버 주도 처리 진행 중·최근 종료 안내 스트립. 헤더(50px) 바로 아래 폭 100%(.popup.on이 flex-wrap이라 width 필수), 본문 높이는 has-async-bar로 보정 */
.async-active-bar {display: flex; align-items: center; gap: 0 12px; width: 100%; height: 36px; padding: 0 20px; border-bottom: 1px solid #DBE4FF; background: #EDF2FF; font-size: 13px; line-height: 1.3; color: #343A40;}
.pop-dispatch-automatic.has-async-bar .pop-body {height: calc(100% - 86px);} /* 50px 헤더 + 36px 스트립 */
.async-active-bar .ic {flex: none; width: 8px; height: 8px; border-radius: 50%; background: #4C6EF5;}
.async-active-bar.is-active .ic {box-shadow: 0 0 0 3px rgba(76, 110, 245, .18); animation: asyncActivePulse 1.4s infinite ease-in-out;}
.async-active-bar .txt {flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0 8px; white-space: nowrap; overflow: hidden;}
.async-active-bar .txt .lead {font-weight: 600;}
.async-active-bar .txt .meta {font-size: 12px; color: #868E96; overflow: hidden; text-overflow: ellipsis;}
.async-active-bar .btn-txt.v3 {flex: none; height: 28px; padding: 0 8px; color: #364FC7; background: transparent;}
.async-active-bar .btn-txt.v3:hover {text-decoration: underline; background: transparent;}
.async-active-bar .btn-txt.v3.btn-async-cancel {color: #868E96;} /* 생성 취소 — 진행 상황 보기보다 약하게 */
.async-active-bar .btn-pop-close {flex: none; opacity: .55;}
.async-active-bar .btn-pop-close:hover {opacity: 1;}
.async-active-bar.is-success {border-color: #B2F2BB; background: #EBFBEE;}
.async-active-bar.is-success .ic {background: #2F9E44;}
.async-active-bar.is-success .btn-txt.v3 {color: #2B8A3E;}
.async-active-bar.is-failed {border-color: #FFC9C9; background: #FFF5F5;}
.async-active-bar.is-failed .ic {background: #F03E3E;}
.async-active-bar.is-failed .btn-txt.v3 {color: #C92A2A;}
@keyframes asyncActivePulse {0%, 100% {opacity: 1;} 50% {opacity: .3;}}
/* 자동배차 배차 결과 생성 로딩 팝업 — 위계: 제목 > 진행 단계 > 경과 시간 > 닫고 계속하기 (style.css 기본 300px 레이아웃을 덮는다) */
.popup.layer.pop-loading-dispatch-auto {width: 360px;}
.pop-loading-dispatch-auto .pop-body {padding: 16px 28px 24px; text-align: center;}
.pop-loading-dispatch-auto .pop-body .loadindg {margin: 34px auto 36px;} /* 점 13px이지만 그림자가 ~25px 퍼지므로 넉넉히 */
.pop-loading-dispatch-auto .loading-title {font-size: 14px; font-weight: 700; line-height: 1.286; color: #343A40;} /* 앱 팝업 제목 규격(.pop-head .tit) */
.pop-loading-dispatch-auto .loading-desc {margin-top: 6px; font-size: 12px; line-height: 1.4; color: #868E96; word-break: keep-all;}
.pop-loading-dispatch-auto .loading-steps {display: flex; margin: 20px 0 0; padding: 0; list-style: none;}
.pop-loading-dispatch-auto .loading-steps li {flex: 1; position: relative; padding-top: 18px; font-size: 11px; line-height: 1.3; color: #ADB5BD;}
.pop-loading-dispatch-auto .loading-steps li::before {content: ''; position: absolute; top: 0; left: 50%; z-index: 1; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #DEE2E6;}
.pop-loading-dispatch-auto .loading-steps li + li::after {content: ''; position: absolute; top: 4px; right: 50%; width: 100%; height: 2px; background: #DEE2E6;}
.pop-loading-dispatch-auto .loading-steps li.is-done {color: #495057;}
.pop-loading-dispatch-auto .loading-steps li.is-done::before,
.pop-loading-dispatch-auto .loading-steps li.is-done::after,
.pop-loading-dispatch-auto .loading-steps li.is-current::after {background: #0052d1;}
.pop-loading-dispatch-auto .loading-steps li.is-current {font-weight: 700; color: #0052d1;}
.pop-loading-dispatch-auto .loading-steps li.is-current::before {background: #0052d1; box-shadow: 0 0 0 4px rgba(0, 82, 209, .15); animation: asyncActivePulse 1.4s infinite ease-in-out;}
.pop-loading-dispatch-auto .txt-stage {margin-top: 12px; font-size: 12px; font-weight: 600; line-height: 1.4; color: #343A40; word-break: keep-all;} /* 알림 본문 규격(.txt-alert). keep-all: "(앞에 2건)" 같은 어절이 중간에서 끊기지 않게 */
.pop-loading-dispatch-auto .loading-elapsed {display: flex; flex-direction: column; align-items: center; gap: 2px 0; margin-top: 16px;}
.pop-loading-dispatch-auto .loading-elapsed-label {font-size: 11px; color: #868E96;}
.pop-loading-dispatch-auto .loading-elapsed-time {font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: .3px; font-variant-numeric: tabular-nums;}
.pop-loading-dispatch-auto .loading-background {margin-top: 18px; padding-top: 14px; border-top: 1px solid #E9ECEF;}
.pop-loading-dispatch-auto .loading-background .btn-loading-background {display: flex; align-items: center; justify-content: center; width: 100%; height: 34px;}
/* 생성 취소 + 닫고 계속하기 한 줄. 취소는 회색(보조 동작), 닫고 계속하기는 기존 보라 */
.pop-loading-dispatch-auto .loading-background-actions {display: flex; gap: 0 8px;}
.pop-loading-dispatch-auto .loading-background-actions .btn {flex: 1 1 0; min-width: 0; width: auto;}
.pop-loading-dispatch-auto .loading-background .btn-loading-cancel {display: flex; align-items: center; justify-content: center; height: 34px;}
.pop-loading-dispatch-auto .loading-background .txt-background-hint {margin-top: 8px; font-size: 11px; line-height: 1.45; color: #868E96; word-break: keep-all;}