/* 내차정비 모의견적 - 버튼 & 반응형 팝업 */

/* 퀵 버튼 (우측 하단, 원격지원 버튼[bottom:130px / 56px] 바로 위) */
.estimate-quick-btn{
	position:fixed;
	right:10px;
	bottom:200px;
	z-index:2147483646;
	width:56px;
	height:56px;
}
.estimate-quick-btn .estimate-open-btn{
	position:relative;
	display:block;
	width:56px;
	height:56px;
	cursor:pointer;
}
.estimate-quick-btn .estimate-open-btn img{
	width:56px;
	height:56px;
	display:block;
	border-radius:50%;
	border:2px solid #00a3df;
	box-shadow:0 2px 8px rgba(0,0,0,.25);
	box-sizing:border-box;
}

/* 팝업 딤 (z-index 최대값) */
.estimate-popup-dim{
	position:fixed;
	top:0; left:0; right:0; bottom:0;
	background:rgba(0,0,0,.5);
	z-index:2147483647;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	box-sizing:border-box;
}
.estimate-popup-dim *{
	box-sizing:border-box;
}

/* 팝업 본체 */
.estimate-popup{
	width:100%;
	max-width:480px;
	max-height:90vh;
	background:#fff;
	border-radius:12px;
	overflow:hidden;
	display:flex;
	flex-direction:column;
	box-shadow:0 10px 40px rgba(0,0,0,.3);
}

/* 타이틀 */
.estimate-popup-head{
	position:relative;
	flex:0 0 auto;
	padding:18px 20px;
	background:#1f4e8c;
	color:#fff;
}
.estimate-popup-title{
	margin:0;
	font-size:18px;
	font-weight:700;
	color:#fff;
}
.estimate-popup-close{
	position:absolute;
	top:50%;
	right:14px;
	transform:translateY(-50%);
	width:34px;
	height:34px;
	border:0;
	background:transparent;
	color:#fff;
	font-size:26px;
	line-height:1;
	cursor:pointer;
}

/* 바디 */
.estimate-popup-body{
	flex:1 1 auto;
	overflow-y:auto;
	padding:20px;
	-webkit-overflow-scrolling:touch;
}

/* 부품 타이틀 */
.estimate-part-title{
	margin:0 0 16px;
	font-size:17px;
	font-weight:700;
	color:#1f4e8c;
}

/* 부품 탭 */
.estimate-tabs{
	display:flex;
	gap:8px;
	margin-bottom:16px;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}
.estimate-tab{
	flex:0 0 auto;
	padding:8px 16px;
	border:1px solid #d3dbe6;
	border-radius:20px;
	background:#fff;
	color:#666;
	font-size:14px;
	font-weight:600;
	cursor:pointer;
	white-space:nowrap;
}
.estimate-tab.is-active{
	border-color:#1f4e8c;
	background:#1f4e8c;
	color:#fff;
}

/* 차대번호 검색 */
.estimate-search-form{
	display:flex;
	gap:8px;
}
.estimate-vin-input{
	flex:1 1 auto;
	min-width:0;
	height:46px;
	padding:0 12px;
	border:1px solid #ccc;
	border-radius:8px;
	font-size:15px;
	text-transform:uppercase;
}
.estimate-vin-input:focus{
	border-color:#1f4e8c;
	outline:none;
}
.estimate-vin-btn{
	flex:0 0 auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:5px;
	padding:0 18px;
	border:0;
	border-radius:8px;
	background:#1f4e8c;
	color:#fff;
	font-size:15px;
	font-weight:700;
	line-height:1;
	cursor:pointer;
}
.estimate-vin-btn .vin-btn-ico{
	display:block;
	flex:0 0 auto;
}

/* 애플식 로딩 인디케이터 (텍스트 좌측) */
.estimate-vin-btn .vin-btn-spinner{
	display:none;
	flex:0 0 auto;
	width:16px;
	height:16px;
	border-radius:50%;
	background:conic-gradient(from 90deg, rgba(255,255,255,0) 0%, #fff 100%);
	-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
	mask:radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px));
	animation:vin-btn-spin .7s linear infinite;
}
.estimate-vin-btn.is-loading .vin-btn-ico{ display:none; }
.estimate-vin-btn.is-loading .vin-btn-spinner{ display:block; }
@keyframes vin-btn-spin{
	to{ transform:rotate(360deg); }
}
.estimate-vin-btn:disabled{
	background:#9aaecb;
	cursor:default;
}
.estimate-search-help{
	margin:8px 2px 0;
	font-size:12px;
	color:#888;
}

/* 메시지 */
.estimate-msg{
	margin-top:16px;
	padding:12px 14px;
	border-radius:8px;
	font-size:14px;
	background:#f1f4f9;
	color:#333;
}
.estimate-msg.is-error{
	background:#fdecec;
	color:#c0392b;
}

/* 차량 정보 */
.estimate-carinfo{
	margin-top:18px;
	padding:14px 16px;
	background:#f7f9fc;
	border:1px solid #e3e9f2;
	border-radius:10px;
}
.estimate-carinfo dl{
	display:flex;
	margin:0;
	padding:4px 0;
	font-size:14px;
}
.estimate-carinfo dt{
	flex:0 0 92px;
	color:#888;
}
.estimate-carinfo dd{
	flex:1 1 auto;
	margin:0;
	color:#222;
	font-weight:600;
}

/* 패널 */
.estimate-panel{
	margin-top:20px;
}

/* 점도 선택 */
.estimate-visc{
	margin-bottom:18px;
}
.ev-label{
	margin-bottom:8px;
	font-size:13px;
	font-weight:700;
	color:#1f4e8c;
}
.ev-chips{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}
.ev-chip{
	padding:8px 14px;
	border:1px solid #d3dbe6;
	border-radius:8px;
	background:#fff;
	color:#555;
	font-size:14px;
	font-weight:700;
	cursor:pointer;
}
.ev-chip em{
	font-style:normal;
	margin-left:4px;
	font-size:11px;
	font-weight:600;
	color:#3f8cff;
}
.ev-chip.is-active{
	border-color:#1f4e8c;
	background:#1f4e8c;
	color:#fff;
}
.ev-chip.is-active em{
	color:#cfe0ff;
}

/* 제품 선택 */
.estimate-product{
	margin-bottom:18px;
}
.ep-label{
	margin-bottom:8px;
	font-size:13px;
	font-weight:700;
	color:#1f4e8c;
}
.ep-current{
	position:relative;
	display:flex;
	align-items:center;
	gap:12px;
	padding:12px 14px;
	border:1px solid #e3e9f2;
	border-radius:10px;
	background:#fff;
}
.ep-img{
	flex:0 0 44px;
	width:44px;
	height:44px;
	object-fit:contain;
	border-radius:6px;
	background:#f4f4f4;
}
.ep-info{
	flex:1 1 auto;
	min-width:0;
}
.ep-name{
	font-size:14px;
	font-weight:700;
	color:#222;
	word-break:break-all;
}
.ep-sub{
	margin-top:3px;
	font-size:12px;
	color:#888;
}
.ep-change-btn{
	flex:0 0 auto;
	padding:8px 16px;
	border:0;
	border-radius:7px;
	background:#00a3df;
	color:#fff;
	font-size:13px;
	font-weight:800;
	cursor:pointer;
	box-shadow:0 2px 8px rgba(0,163,223,.45);
	animation:ep-change-pulse 1.6s ease-in-out infinite;
}
.ep-change-btn:hover{ background:#0093c9; }
@keyframes ep-change-pulse{
	0%,100%{ box-shadow:0 2px 8px rgba(0,163,223,.45); }
	50%{ box-shadow:0 2px 14px rgba(0,163,223,.85); }
}

/* 변경 안내 말풍선 */
.ep-change-tip{
	position:absolute;
	right:10px;
	bottom:calc(100% + 9px);
	max-width:240px;
	padding:9px 13px;
	background:#00a3df;
	color:#fff;
	font-size:12px;
	font-weight:600;
	line-height:1.35;
	border-radius:9px;
	box-shadow:0 6px 16px rgba(0,0,0,.2);
	cursor:pointer;
	z-index:5;
	animation:ep-tip-float 1.8s ease-in-out infinite;
}
.ep-change-tip::after{
	content:'';
	position:absolute;
	top:100%;
	right:28px;
	border:7px solid transparent;
	border-top-color:#00a3df;
}
.ep-change-tip.is-hidden{ display:none; }
@keyframes ep-tip-float{
	0%,100%{ transform:translateY(0); }
	50%{ transform:translateY(-3px); }
}

/* 제품 리스트 (변경) */
/* 제품 선택 레이어 */
.ep-modal{
	position:absolute;
	top:0; left:0; right:0; bottom:0;
	z-index:10;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:20px;
	background:rgba(0,0,0,.45);
}
.ep-modal-sheet{
	width:100%;
	max-width:420px;
	max-height:72vh;
	background:#fff;
	border-radius:12px;
	display:flex;
	flex-direction:column;
	overflow:hidden;
	box-shadow:0 10px 40px rgba(0,0,0,.3);
}
.ep-modal-head{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:13px 16px;
	border-bottom:1px solid #eef1f6;
}
.ep-modal-title{
	font-size:15px;
	font-weight:700;
	color:#222;
}
.ep-modal-close{
	width:30px;
	height:30px;
	border:0;
	background:transparent;
	font-size:22px;
	line-height:1;
	color:#888;
	cursor:pointer;
}
.ep-modal-list{
	flex:1 1 auto;
	max-height:248px; /* 제품 약 4개까지 노출 후 스크롤 */
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
.ep-item{
	display:flex;
	align-items:center;
	gap:12px;
	padding:11px 14px;
	border-bottom:1px solid #eef1f6;
	cursor:pointer;
}
.ep-item:last-child{ border-bottom:0; }
.ep-item:hover{ background:#f5f8fc; }
.ep-item.is-selected{ background:#eef4fc; }
.ep-item .epi-img{
	flex:0 0 36px;
	width:36px;
	height:36px;
	object-fit:contain;
	border-radius:5px;
	background:#f4f4f4;
}
.ep-item .epi-info{ flex:1 1 auto; min-width:0; }
.ep-item .epi-name{ font-size:13px; font-weight:700; color:#222; word-break:break-all; }
.ep-item .epi-sub{ margin-top:2px; font-size:11px; color:#999; }
.ep-item .epi-price{ flex:0 0 auto; font-size:14px; font-weight:800; color:#1f4e8c; white-space:nowrap; }

/* 계산 항목 */
.estimate-calc{
	border-radius:10px;
	overflow:hidden;
}
.ec-field{
	display:flex;
	align-items:center;
	padding:10px 14px;
	border-bottom:1px solid #eef1f6;
}
.ec-field:last-child{ border-bottom:0; }
.ec-field label{
	flex:1 1 auto;
	font-size:14px;
	color:#444;
}
.ec-field label em{
	font-style:normal;
	font-size:11px;
	color:#aaa;
}
.ec-field label .ec-prd{
	display:block;
	margin-top:2px;
	font-size:11px;
	font-weight:400;
	color:#999;
	word-break:break-all;
}
.ec-field label .ec-prd:empty{
	display:none;
}
.ec-field label .ec-oem{
	display:block;
	margin-top:2px;
	font-size:11px;
	color:#bbb;
	letter-spacing:.2px;
	word-break:break-all;
}
.ec-field label .ec-oem:empty{
	display:none;
}
.ec-input{
	flex:0 0 auto;
	display:flex;
	align-items:center;
	gap:6px;
}
.ec-input .ef-input{
	width:110px;
	height:38px;
	padding:0 10px;
	border:1px solid #ccc;
	border-radius:7px;
	font-size:15px;
	font-weight:700;
	text-align:right;
	color:#222;
}
.ec-input .ef-input:focus{
	border-color:#1f4e8c;
	outline:none;
}
.ec-input .ef-input.ef-readonly{
	background:transparent;
	border:0;
	color:#333;
	font-weight:800;
	cursor:default;
}
.ec-input .ec-unit{
	flex:0 0 auto;
	width:20px;
	font-size:13px;
	color:#888;
}

/* 오일 / 필터 입력 그룹 구분 */
.estimate-calc .ec-group-oil{
	background:#fbfcfe;
	border:1px solid #eef1f6;
	border-radius:9px;
	padding:2px 12px;
}
.estimate-calc .ec-group-filter{
	margin-top:10px;
	background:#f6faf7;
	border:1px solid #e6f0ea;
	border-radius:9px;
	padding:2px 12px;
}
.estimate-calc .ec-group-labor{
	margin-top:10px;
	background:#fbfcfe;
	border:1px solid #eef1f6;
	border-radius:9px;
	padding:2px 12px;
}
.estimate-calc .ec-group-fee{
	margin-top:10px;
	background:#fbfcfe;
	border:1px solid #eef1f6;
	border-radius:9px;
	padding:2px 12px;
}
.estimate-calc .ec-group .ec-field{ padding-left:0; padding-right:0; }
.estimate-calc .ec-group .ec-field:last-child{ border-bottom:0; }

/* 정산 / 예상 수익 (정비소 입점 관점) */
.estimate-settle{
	margin-top:14px;
}
.estimate-settle .es-sec{
	margin-top:10px;
	padding:12px 14px;
	background:#f7f9fc;
	border:1px solid #eef1f6;
	border-radius:9px;
}
.estimate-settle .es-sec:first-child{ margin-top:0; }
.estimate-settle .es-title{
	font-size:13px;
	font-weight:800;
	color:#1f4e8c;
	margin-bottom:8px;
}
.estimate-settle .es-title em{
	font-style:normal;
	font-weight:500;
	font-size:11px;
	color:#999;
}
.estimate-settle .es-row{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:4px 0;
	font-size:13px;
	color:#555;
}
.estimate-settle .es-row span{ flex:1 1 auto; }
.estimate-settle .es-row span small{ color:#aaa; font-size:11px; }
.estimate-settle .es-row b{
	flex:0 0 auto;
	font-weight:700;
	color:#333;
	white-space:nowrap;
}
.estimate-settle .es-row b small{ font-weight:400; color:#999; font-size:11px; }
.estimate-settle .es-row.es-sub{ font-size:12px; color:#999; padding:2px 0; }
.estimate-settle .es-row.es-sub b{ color:#777; font-weight:600; }
.estimate-settle .es-row.es-empty{ color:#bbb; justify-content:center; }
.estimate-settle .es-row.es-strong{
	margin-top:6px;
	padding-top:8px;
	border-top:1px solid #e3e9f2;
	font-size:14px;
}
.estimate-settle .es-row.es-strong b{ color:#1f4e8c; font-weight:800; }
.estimate-settle .es-row.es-profit b{ color:#e8453c; font-size:16px; }

/* 통(용량)별 예상수익 행 (읽기전용) */
.estimate-settle .es-cans{ margin-bottom:6px; }
.estimate-settle .es-can-row{
	display:flex;
	align-items:center;
	gap:8px;
	padding:9px 10px;
	margin-bottom:6px;
	border:1px solid #e3e9f2;
	border-radius:8px;
	background:#fff;
}
.estimate-settle .es-can-row:last-child{ margin-bottom:0; }
.estimate-settle .es-can-row.is-best{
	border-color:#f3c0bc;
	background:#fff8f7;
}
.estimate-settle .es-can-row .ecr-liter{
	flex:0 0 auto;
	font-size:13px;
	font-weight:700;
	color:#333;
}
.estimate-settle .es-can-row .ecr-liter em{
	font-style:normal;
	margin-left:4px;
	padding:1px 5px;
	font-size:10px;
	font-weight:700;
	color:#fff;
	background:#e8453c;
	border-radius:4px;
	vertical-align:middle;
}
.estimate-settle .es-can-row .ecr-cost{
	flex:1 1 auto;
	text-align:right;
	font-size:11px;
	color:#999;
}
.estimate-settle .es-can-row .ecr-profit{
	flex:0 0 auto;
	font-size:13px;
	font-weight:800;
	color:#1f4e8c;
	white-space:nowrap;
}
.estimate-settle .es-can-row.is-best .ecr-profit{ color:#e8453c; }

/* 하단 고정: 정비소 예상수익 + 고객 판매가 */
.estimate-popup-foot{
	flex:0 0 auto;
	padding:14px 20px;
	border-top:1px solid #e9edf3;
	background:#fff;
}
.estimate-total{
	display:flex;
	align-items:center;
	gap:12px;
	width:100%;
	padding:16px 18px;
	background:#1f4e8c;
	border-radius:10px;
}
.et-label{
	flex:0 0 auto;
	font-size:15px;
	font-weight:700;
	color:#fff;
}
.et-amount{
	flex:1 1 auto;
	text-align:right;
	font-size:24px;
	font-weight:800;
	color:#fff;
	white-space:nowrap;
}

/* 고객 판매가 박스 (리터별 단가 섹션 위, 별도) */
.estimate-settle .es-customer-sec{
	background:#eef4fc;
	border-color:#d3e2f5;
}
.estimate-settle .es-customer-sec .es-row.es-strong{
	margin-top:0;
	padding-top:0;
	border-top:0;
	font-size:15px;
}
.estimate-settle .es-customer-sec .es-row.es-strong span{ font-weight:700; color:#333; }
.estimate-settle .es-customer-sec .et-customer{
	font-size:20px;
	font-weight:800;
	color:#1f4e8c;
	white-space:nowrap;
}

/* 모바일 */
@media (max-width:600px){
	.estimate-quick-btn{
		right:10px;
		bottom:200px; /* 모바일 웹: 원격지원 버튼(bottom 130 + 높이 56) 위로 분리 */
	}
	.estimate-quick-btn.is-app{
		bottom:130px; /* 앱: 원격지원 버튼이 표시되지 않으므로 그 자리에 표시 */
	}
	.estimate-popup-dim{
		padding:0;
	}
	.estimate-popup{
		max-width:100%;
		width:100%;
		height:100%;
		max-height:100%;
		border-radius:0;
	}
	.ec-input .ef-input{ width:96px; }

	/* 제품 선택 레이어: 모바일은 하단 시트 */
	.ep-modal{
		padding:0;
		align-items:flex-end;
	}
	.ep-modal-sheet{
		max-width:100%;
		max-height:80vh;
		border-radius:14px 14px 0 0;
	}
}