@charset "utf-8";

.step-wrap ul li.complete .num { background: var(--blue); border-color: var(--blue); }
.step-wrap ul li:not(.complete):hover .num, 
.step-wrap ul li.select .num { border-color: var(--blue); color: var(--blue); }
.step-wrap ul li:not(.complete):hover .wrap p, 
.step-wrap ul li.select .wrap p, 
.step-wrap ul li.complete .wrap p { color: var(--blue); }
.form .check-input-wrap .check-input { margin-right: 5px;}
.form .check-input-wrap .check-input.consent-input {padding: 20px 20px 12px; background: #f9ecec; border-radius: 5px; border: 1px dashed #ddbdbd; width: 100%; }
.form .check-input-wrap .check-input.consent-input input[type=checkbox]:not(old) + label { font-size: 1.5rem; color: #592121; font-weight: 600;}

.scroll-table { overflow-x: auto; }
.scroll-table table { min-width: 500px; table-layout: auto; }


/* 계좌 정보 입력 UI 스타일 */
.account-input-group .input-row { display: flex; gap: 10px; align-items: flex-start; }
.account-input-group .select-box.bank-select { flex: 0 0 150px; }
.account-input-group .input-box.account-holder { flex: 0 0 120px; }
.account-input-group .input-box.account-number { flex: 1; }
.account-input-group .select-box select,
.account-input-group .input-box .text-input { width: 100%; height: 40px; border: 1px solid #ddd; border-radius: 4px; padding: 0 12px; font-size: 14px; background-color: #fff; }
.account-input-group .select-box select:focus,
.account-input-group .input-box .text-input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); }
.account-input-group .input-box input[type="text"].text-input { width: 100%; }
.account-input-group .select-box select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px 12px; padding-right: 40px; appearance: none; -webkit-appearance: none; -moz-appearance: none; }

.datepicker-btn { position: relative; width: 120px; max-width: 100%; border: 0; height: 40px; display: inline-block; font-size: 1.4rem; padding: 0 15px 0 10px; border: 1px solid #d3d3d3; color: #737373; border-radius: 5px; font-weight: 600; background-color: #fff; }
.datepicker-btn .material-icons { font-size: 16px; }

.map-area { position: relative; margin-top: 10px; border: 1px solid #d3d3d3; height: 400px; }
.map-area .map-marker { width: 45px; height: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


@media(max-width: 768px) { 
	.account-input-group .input-row { flex-direction: column; gap: 8px; }
    .account-input-group .select-box.bank-select,
    .account-input-group .input-box.account-holder,
    .account-input-group .input-box.account-number { flex: none; width: 100%; }
}

@media (max-width: 475px) {
    .term-check-wrap ul li .right-term-info .btn-wrap { position: static; margin-top: 5px; }
	.form .check-input-wrap .check-input.consent-input input[type=checkbox]:not(old) + label { font-size: 1.4rem; }
	.form .input-box input[type="text"].text-input { width: 100%; }
}

/* 개발자 CSS */
/* input type time 스타일 */
.datepicker-btn { position: relative; width: auto; min-width: 120px; max-width: 100%; border: 0; height: 40px; display: inline-block; font-size: 1.4rem; padding: 0 5px 0 5px; border: 1px solid #d3d3d3; color: #737373; border-radius: 5px; font-weight: 600; background-color: #fff; white-space: nowrap; cursor: pointer; }

/* time input을 버튼 스타일에 맞게 표시 */
.datepicker-btn input[type="time"].text-input { width: 100%; height: 100%; border: 0; background: transparent; padding: 0 6px 0 6px; margin: 0; color: inherit; font: inherit; line-height: 1; box-shadow: none; cursor: pointer; }
.datepicker-btn input[type="time"].text-input:focus { outline: none; box-shadow: none; }