/* =========================================================
   현대캐피탈 수정요청 미리보기 오버라이드 (1차안)
   #4 로고 강조 / #6 여백 조정 / #7 글씨 굵게·진하게 / #8 하단 고지 선명
   ※ 검토용. 원본 CSS는 그대로 두고 이 파일로만 덮어씀.
   ========================================================= */

/* ---------- #7 글씨 굵게·진하게 (제목이 normal로 리셋된 것 복구) ---------- */
#wrap h1, #wrap h2, #wrap h3, #wrap h4, #wrap h5, #wrap strong, #wrap b { font-weight: 700 !important; }
#wrap .ldtit h2 { font-weight: 800 !important; color: #13294b !important; }
body { color: #1a1a1a !important; }
.intCon p, .main_counselList p { color: #333 !important; font-weight: 500 !important; }
/* 차량 카드 트림 글씨 진하게 */
.carinfo .carname p { color: #333 !important; font-weight: 600 !important; }
.carinfo .carname h3 { font-weight: 800 !important; }

/* ---------- #4 헤더 로고 크게/강조 ---------- */
#htop .logo a { width: 300px !important; height: 54px !important; }
@media (max-width: 768px) { #htop .logo a { width: 200px !important; height: 38px !important; } }

/* ---------- #8 하단 '계약 관련 주요 고지사항 / 상품조건' 선명·명확 ---------- */
.cution h4, .cution .maintit { font-size: 20px !important; font-weight: 800 !important; color: #13294b !important; }
.cution h3 { font-size: 17px !important; font-weight: 700 !important; color: #13294b !important; }
.cution li .txt { font-size: 15px !important; line-height: 1.65 !important; color: #2a2a2a !important; }
.cution li .num.bold { color: #3d5bdc !important; font-weight: 700 !important; }
@media (max-width: 768px) { .cution li .txt { font-size: 13.5px !important; } .cution h4, .cution .maintit { font-size: 17px !important; } }

/* ---------- #6 여백 과다 조정 (상하 간격 축소) ---------- */
.contentWrap .main_counselList { padding-top: 30px !important; }
.contentWrap .countBox { padding: 26px 0 !important; }
.contentWrap .main_processBox { padding: 0 0 32px !important; }

/* =========================================================
   [2026-07-14] 섹션 리디자인
   ① #recom → "장기렌트, 이런 분께 딱 맞습니다" 6카드 (사진형)
   ② #int 계약절차 → 카드 4단계 (원형 사진)
   ========================================================= */

/* ---------- 공통 ---------- */
#recom { background: #f5f7fb !important; padding: 64px 0 !important; }
.benefitHead .accent, .stepHead .accent { color: #3d5bdc; }

/* ---------- ① 6카드 섹션 ---------- */
.benefitHead { text-align: center; padding: 0 0 36px; }
.benefitHead h2 { font-size: 34px; font-weight: 800 !important; color: #111; margin: 0; }
.benefitHead p { margin: 12px 0 0; color: #667085; font-size: 16px; }
.benefitCards ul { display: flex; flex-wrap: wrap; gap: 24px; list-style: none; margin: 0; padding: 0; }
.benefitCards li { flex: 1 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); background: #fff; border-radius: 18px; padding: 18px 20px 26px; box-shadow: 0 6px 18px rgba(19, 41, 75, .07); }
.benefitCards .pic img { width: 100%; border-radius: 14px; display: block; }
.benefitCards .chip { display: inline-block; margin: 16px 0 10px; padding: 6px 13px; border-radius: 999px; background: #eef3ff; color: #3d5bdc; font-size: 13px; font-weight: 700; line-height: 1.3; }
.benefitCards h3 { font-size: 21px; font-weight: 800 !important; color: #111 !important; margin: 0 0 8px; }
.benefitCards p { font-size: 15px; color: #4b5563 !important; line-height: 1.62; margin: 0; }
@media (max-width: 992px) {
    .benefitCards li { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); }
}
@media (max-width: 600px) {
    .benefitCards ul { gap: 16px; }
    .benefitCards li { flex-basis: 100%; max-width: 100%; }
    .benefitHead h2 { font-size: 25px; }
    .benefitHead p { font-size: 14px; }
}

/* ---------- ② 계약절차 4단계 카드 ---------- */
.stepHead { padding: 0 0 28px; }
.stepHead h2 { font-size: 32px; font-weight: 800 !important; color: #111; margin: 0; }
.stepHead p { margin: 10px 0 0; color: #667085; font-size: 15.5px; }
.stepCards ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0 0 30px; padding: 0; }
.stepCards li { flex: 1 1 calc(25% - 15px); max-width: calc(25% - 15px); background: #fff; border: 1px solid #edf0f6; border-radius: 18px; text-align: center; padding: 26px 16px 30px; box-shadow: 0 6px 16px rgba(19, 41, 75, .06); }
.stepCards .pic { width: 158px; max-width: 70%; margin: 0 auto 12px; }
.stepCards .pic img { width: 100%; display: block; }
.stepCards h5 { color: #3d5bdc; font-size: 13px; letter-spacing: 1.5px; font-weight: 800; margin: 6px 0 6px; }
.stepCards h3 { font-size: 20px; font-weight: 800 !important; color: #111 !important; margin: 0 0 8px; }
.stepCards p { font-size: 14.5px; color: #4b5563 !important; line-height: 1.6; margin: 0; }
@media (max-width: 992px) {
    .stepCards li { flex-basis: calc(50% - 10px); max-width: calc(50% - 10px); }
}
@media (max-width: 520px) {
    .stepCards ul { gap: 14px; }
    .stepCards li { flex-basis: 100%; max-width: 100%; }
    .stepHead h2 { font-size: 25px; }
}

/* ---------- [2026-07-20] 차량카드 가격정보 2줄 고정 ----------
   "월 납입금 기준" 1줄 + 조건 1줄. 조건 줄이 카드 폭을 넘지 않도록
   글자 크기 축소 + 단어 단위 줄바꿈(keep-all) + 자간 축소 */
.carList .cartxt, .cartxt {
    word-break: keep-all;
    font-size: 12px !important;
    letter-spacing: -0.5px;
    line-height: 1.5;
}
.cartxt .bold { font-size: 14px !important; }
@media (max-width: 420px) {
    .cartxt { font-size: 11.5px !important; letter-spacing: -0.5px; }
    .cartxt .bold { font-size: 12.5px !important; }
}

/* ---------- [2026-07-20] 현대캐피탈 전용서체(Youandi Modern) 전체 적용 ----------
   CI 가이드 A.1.9 서체 규정 반영: 본문 Text Regular/Bold, 헤드카피 ExtraBold */
body, pre, input, select, textarea, button {
    font-family: 'youandi', 'Pretendard', -apple-system, 'Apple SD Gothic Neo', Dotum, sans-serif !important;
}
.ft-hana, #wrap h1, #wrap h2, #wrap h3 {
    font-family: 'youandi', 'Pretendard', sans-serif !important;
}

/* ---------- [2026-07-22] 차량카드 '월 납입금 기준' 가운데 배치 ----------
   원본: position:absolute + left:35px(좌측 고정)
   변경: 좌우를 잡고 중앙 정렬 + 양옆 여백 확보로 문구가 박스 끝에 닿지 않게 */
#best .bestList .list .cartxt {
    left: 0 !important;
    right: 0 !important;
    padding: 0 20px;
    text-align: center !important;   /* 덩어리를 박스 중앙에 */
}
/* 두 줄은 왼쪽 라인을 맞춘 채(수정 전 형태) 블록째 중앙 배치 */
#best .bestList .list .cartxt .cartxtIn {
    display: inline-block;
    text-align: left;
}
@media (max-width: 600px) {
    #best .bestList .list .cartxt { padding: 0 12px; }
}