/* ==============================
   만사혈통 하단 퀵상담 폼
================================ */

/* 전체 고정 영역 */
.quick-fixedWrap.bloodcare_quick_wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99980;
    width: 100%;
    background: #7c0808;
    font-family: 'Pretendard', sans-serif;
    box-sizing: border-box;
    transition: transform 0.35s ease;
    will-change: transform;
}

.quick-fixedWrap.bloodcare_quick_wrap * {
    box-sizing: border-box;
    font-family: 'Pretendard', sans-serif !important;
}

/* 닫혔을 때: 폼은 아래로 내려가고 상단만 살짝 보임 */
.quick-fixedWrap.bloodcare_quick_wrap.is-closed {
    transform: translateY(calc(100% - 10px));
}


/* ==============================
   열림/닫힘 토글 버튼
================================ */

.bloodcare_quick_toggle {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 120px;
    height: 32px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px 8px 0 0 !important;
    overflow: hidden;
    background: #7c0808;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    z-index: 3;
}

/* 닫혔을 때 더 알아보기 탭 */
.quick-fixedWrap.bloodcare_quick_wrap.is-closed .bloodcare_quick_toggle {
    min-width: 150px;
    background: #7c0808;
    border-radius: 8px 8px 0 0 !important;
}


/* ==============================
   퀵상담 폼 내부 레이아웃
================================ */

.bloodcare_quick_inner {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 0 34px;
}

.bloodcare_quick_form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 52px;
    width: 100%;
}

.bloodcare_quick_left {
    width: 780px;
}

.bloodcare_quick_row {
    display: grid;
    grid-template-columns: 70px 270px 120px 270px;
    align-items: center;
    gap: 0 18px;
    margin-bottom: 16px;
}

.bloodcare_quick_row > label {
    display: block;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
    text-align: left;
}

/* 중요: 연령, 성별 라벨 위치 — 맞춘 값 유지 */
.bloodcare_quick_row > label:nth-of-type(2) {
    text-align: left;
    padding-left: 0;
    margin-left: 0;
    transform: translateX(70px);
}

/* 중요: 연령/성별 + 오른쪽 박스 그룹 전체 위치 — 맞춘 값 유지 */
.bloodcare_quick_row > label:nth-of-type(2),
.bloodcare_quick_row > label:nth-of-type(2) + input,
.bloodcare_quick_row > label:nth-of-type(2) + .bloodcare_quick_gender {
    position: relative;
    left: -20px;
}


/* ==============================
   입력 박스
================================ */

.bloodcare_quick_row input[type="text"],
.bloodcare_quick_row input[type="number"],
.bloodcare_quick_row input[type="tel"] {
    width: 270px;
    height: 52px;
    padding: 0 22px;
    border: 0;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    background: #fff;
    font-size: 18px;
    font-weight: 400;
    color: #111;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

/* input 회색 안내문구 */
.bloodcare_quick_row input::placeholder,
.bloodcare_quick_row input::-webkit-input-placeholder,
.bloodcare_quick_row input::-moz-placeholder,
.bloodcare_quick_row input:-ms-input-placeholder {
    font-family: 'Pretendard', sans-serif !important;
    font-size: 16px;
    font-weight: 400;
    color: #b0b0b0;
    opacity: 1;
}


/* ==============================
   성별 버튼
================================ */

.bloodcare_quick_gender {
    display: flex;
    width: 270px;
    height: 52px;
    border-radius: 0 !important;
    overflow: hidden;
}

.bloodcare_quick_gender span {
    flex: 1;
    position: relative;
}

.bloodcare_quick_gender input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
}

.bloodcare_quick_gender label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    margin: 0;
    background: #fff;
    border: 0;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    font-size: 19px;
    font-weight: 500;
    color: #111;
    cursor: pointer;
}

/* 기존 공통 CSS에서 생기는 작은 네모 제거 */
.bloodcare_quick_gender label:before,
.bloodcare_quick_gender label:after {
    content: none !important;
    display: none !important;
}

.bloodcare_quick_gender input[type="radio"]:checked + label {
    background: #d01212;
    color: #fff;
}


/* ==============================
   동의 영역
================================ */

.bloodcare_quick_agree {
    display: flex;
    align-items: center;
    gap: 36px;
    padding-left: 0;
    margin-top: 12px;
}

.bloodcare_quick_agree p {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* 체크박스 */
.bloodcare_quick_agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 0 8px 0 0;
    background: #fff;
    border: 1px solid #fff;
    border-radius: 0 !important;
    cursor: pointer;
}

/* 체크 표시 */
.bloodcare_quick_agree input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    width: 5px;
    height: 10px;
    border: solid #787878;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* 동의 텍스트 */
.bloodcare_quick_agree label,
.bloodcare_quick_agree a {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 18px;
    text-decoration: none;
}

.bloodcare_quick_agree a {
    margin-left: 4px;
}


/* ==============================
   무료상담 신청 버튼
================================ */

.bloodcare_quick_btn_area {
    flex: 0 0 170px;
    transform: translateY(-15px);
}

.bloodcare_quick_submit {
    width: 170px;
    height: 120px;
    border: 0;
    border-radius: 0 !important;
    background: #ffebb5;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.25;
    color: #7c0808;
    cursor: pointer;
}

/* =========================================================
   하단 퀵상담 PC → 태블릿 자연 축소
   기준: 901px ~ 1874px
========================================================= */
@media screen and (min-width: 901px) and (max-width: 1874px) {

    .bloodcare_quick_inner {
        max-width: min(1180px, calc(100vw - 40px));
        padding-top: clamp(30px, calc(100vw * 40 / 1874), 40px);
        padding-bottom: clamp(26px, calc(100vw * 34 / 1874), 34px);
    }

    .bloodcare_quick_form {
        gap: clamp(30px, calc(100vw * 52 / 1874), 52px);
    }

    .bloodcare_quick_left {
        width: clamp(700px, calc(100vw * 780 / 1874), 780px);
    }

    .bloodcare_quick_row {
        grid-template-columns:
            clamp(64px, calc(100vw * 70 / 1874), 70px)
            clamp(245px, calc(100vw * 270 / 1874), 270px)
            clamp(100px, calc(100vw * 120 / 1874), 120px)
            clamp(245px, calc(100vw * 270 / 1874), 270px);
        gap: 0 clamp(14px, calc(100vw * 18 / 1874), 18px);
        margin-bottom: clamp(12px, calc(100vw * 16 / 1874), 16px);
    }

    .bloodcare_quick_row > label {
        font-size: clamp(18px, calc(100vw * 21 / 1874), 21px);
    }

    .bloodcare_quick_row > label:nth-of-type(2) {
        transform: translateX(clamp(55px, calc(100vw * 70 / 1874), 70px));
    }

    .bloodcare_quick_row > label:nth-of-type(2),
    .bloodcare_quick_row > label:nth-of-type(2) + input,
    .bloodcare_quick_row > label:nth-of-type(2) + .bloodcare_quick_gender {
        left: clamp(-20px, calc(100vw * -20 / 1874), -14px);
    }

    .bloodcare_quick_row input[type="text"],
    .bloodcare_quick_row input[type="number"],
    .bloodcare_quick_row input[type="tel"] {
        width: 100%;
        height: clamp(46px, calc(100vw * 52 / 1874), 52px);
        padding: 0 clamp(16px, calc(100vw * 22 / 1874), 22px);
        font-size: clamp(16px, calc(100vw * 18 / 1874), 18px);
    }

    .bloodcare_quick_gender {
        width: 100%;
        height: clamp(46px, calc(100vw * 52 / 1874), 52px);
    }

    .bloodcare_quick_gender label {
        height: clamp(46px, calc(100vw * 52 / 1874), 52px);
        font-size: clamp(17px, calc(100vw * 19 / 1874), 19px);
    }

    .bloodcare_quick_agree {
        gap: clamp(24px, calc(100vw * 36 / 1874), 36px);
        margin-top: clamp(9px, calc(100vw * 12 / 1874), 12px);
    }

    .bloodcare_quick_agree label,
    .bloodcare_quick_agree a {
        font-size: clamp(12px, calc(100vw * 14 / 1874), 14px);
    }

    .bloodcare_quick_btn_area {
        flex: 0 0 clamp(145px, calc(100vw * 170 / 1874), 170px);
        transform: translateY(clamp(-15px, calc(100vw * -15 / 1874), -10px));
    }

    .bloodcare_quick_submit {
        width: clamp(145px, calc(100vw * 170 / 1874), 170px);
        height: clamp(104px, calc(100vw * 120 / 1874), 120px);
        font-size: clamp(25px, calc(100vw * 30 / 1874), 30px);
    }
}