/* pages/home/main.css (메인 페이지 전용) */

/* 2. Hero 섹션 */
.hero-section {
  margin-top: 0;
}
.hero-background {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}
.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.15);
  color: #fff;
  text-align: center;
  padding: 0 20px;
}
.hero-text-wrapper {
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  margin-bottom: 10px;
}
.hero-title {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
}
.hero-subtitle {
  font-size: 1.7rem;
  padding-top: 8px;
}
.hero-tel {
  position: absolute;
  bottom: 10px;
  left: 30px;
  font-size: 1.4rem;
  color: #9747FF;
  font-style: italic;
  font-weight: bold;
  background: rgba(200, 200, 255, 0.4);
  /* background: rgba(255,255,255,0.2); */
  /* background: rgba(200, 300, 455, 0.4); */
  padding: 6px 12px;
  border-radius: 4px;
}

/* 9. 반응형 (메인 페이지 전용) */
@media (max-width: 768px) {
  .hero-overlay h1 { font-size: 2rem; }
  .hero-overlay p { font-size: 1rem; }
  .hero-overlay .hero-tel { font-size: 1.2rem; }
}
@media (max-width: 480px) {
  .hero-overlay h1 { font-size: 1.6rem; }
  .hero-overlay p { font-size: 0.95rem; }
  .hero-overlay .hero-tel { font-size: 1rem; }
}




/* ------------- 상담/견적 섹션 ------------- */
/* 페이지 섹션 랩핑 */
.counsel-section-wrap {
    display: flex;
    flex-direction: row;
    max-width: 1490px;
    margin: 0 auto;
    background: #fff;
    gap: 50px;
    padding-bottom: 40px;
    box-sizing: border-box;
}

/* 왼쪽(프로모션) */
.counsel-left-category {
    flex: 1 1 45%;
    min-width: 420px;
    max-width: 720px;
    box-shadow: 0 2px 12px 0 rgba(60, 80, 120, 0.09);
    border-radius: 18px;
    background: #fafbfc;
    padding: 0 0 30px 0;
}

/* 오른쪽(상담폼) */
.counsel-right-category {
    flex: 1 1 55%;
    min-width: 420px;
    max-width: 720px;
    box-shadow: 0 2px 12px 0 rgba(60, 80, 120, 0.09);
    border-radius: 18px;
    background: #fafbfc;
    padding: 0 0 30px 0;
}

/* 타이틀 영역 */
.promotion-info-title,
.counsel-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px 10px 0 10px;
    margin-bottom: 50px;
}

.promotion-info-title h3,
.counsel-info-title h3 {
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0;
}

.promotion-info-title img,
.counsel-info-title img {
    width: 24px;
    height: 24px;
}

/* 전화상담 프로모션 */
.promotion-phone-section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 520px;
    /* padding: 38px 30px 0 30px; */
    border-radius: 16px;
    box-sizing: border-box;
}
.phone-background-img {
    position: absolute;
    left: 50%; top: 45%;
    transform: translate(-50%, -50%);
    width: 400px; height: 100%;
    z-index: 1;
    background: url('/resources/images/main/counsel/trickle_le.svg') no-repeat center center;
    background-size: contain;
    pointer-events: none;
    /* opacity: 0.65; */
}
.promotion-desc {
	margin: 0px;
	margin-bottom: 100px;
    font-size: 1.4rem;
	font-weight: 700;
    text-align: center;
    z-index: 2;
}
.promotion-content {
    margin: 40px auto;
    min-width: 270px;
    max-width: 400px;
    text-align: center;
    z-index: 2;
}
.promotion-center {
    color: #383838;
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: 80px;
}
.promotion-text {
    font-size: 1.2rem;
    color: #0799F4;
    line-height: 2.2;
    margin-bottom: 80px;
}
.promotion-tel {
    font-size: 1.25rem;
    font-weight: 700;
    color: #9747FF;
    margin-bottom: 80px;
}
.promotion-tel-label {
    font-family: Cambria, serif;
    font-style: italic;
    margin-right: 4px;
}
.promotion-tel-number {
    font-size: 1.25em;
    font-weight: bold;
    letter-spacing: 1px;
}
.promotion-point {
    color: #0799F4;
    font-weight: bold;
    font-size: 1.3rem;
}
.promotion-bottom {
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    z-index: 2;
    color: #383838;
    line-height: 1.7;
}

/* ================== 상담 신청 폼 =================== */
.counsel-type-select {
    display: flex;
    gap: 100px;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 50px;
}
.counsel-form-type {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.counsel-form-type input[type="radio"] {
  accent-color: #0799F4;
  width: 20px; height: 20px;
  vertical-align: middle;
  cursor: pointer;
  margin: 0px;
}
.counsel-form-type label {
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 500;
  user-select: none;
}

.counsel-personal-section,
.counsel-company-section {
    padding: 0 20px;
}

/* [수정] 폼 입력 영역을 flex-box로 변경하여 행 간격 통일 */
.counsel-form-input-area {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px; /* 모든 행(row)의 간격을 20px로 통일 */
    margin-bottom: 20px;
}

.counsel-form-row-wrap {
    display: flex;
    gap: 16px;
}

.counsel-form-row-wrap > .counsel-form-row {
    flex: 1 1 0;
}

.counsel-form-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    /* [삭제] 개별 margin-bottom 제거 -> 부모인 input-area의 gap으로 제어 */
}

.counsel-form-row label {
    font-weight: 400;
    font-size: 1.14rem;
    color: #343a40;
    margin-bottom: 4px;
    letter-spacing: 0.03em;
}
/* .counsel-form-flex-row {
    display: flex;
    gap: 16px;
    align-items: flex-end;
} */

.form-col-1,
.form-col-2 {
    flex: 1 1 0;
    min-width: 0;
}

.form-col-2 {
    display: flex;
    flex-direction: column;
}

/* 첨부파일 레이블 + 첨부파일버튼 */
.file-upload-label-wrap {
    display: flex;
    align-items: end;
    justify-content: space-between;
    /* gap: 9px; */
    width: 100%;
}
.file-name-wrap {
    position: relative;
    /* [삭제] flex가 아닌 컨테이너에서 불필요한 속성 제거 */
}
.file-name {
    width: 100%;
    min-width: 70px;
}

/* [추가] Placeholder 색상 통일 */
.counsel-form-input::placeholder,
.counsel-form-textarea::placeholder {
    color: #b1b1b1;
    opacity: 1; /* Firefox 브라우저를 위한 설정 */
}

/* [수정] Select의 기본 색상을 placeholder 색상으로 지정 */
.counsel-form-select {
    color: #b1b1b1;
}
/* [추가] Select에 값이 선택되면 글자색 변경 (JS 연동) */
.counsel-form-select.has-value {
    color: #343a40;
}
/* [추가] Select의 드롭다운 옵션들은 원래 글자색으로 표시 */
.counsel-form-select option {
    color: #343a40;
}


.counsel-form-input,
.counsel-form-select,
.counsel-form-textarea {
    width: 100%;
    height: 42px;
    padding: 8px 13px;
    font-size: 1.06rem;
    border-radius: 7px;
    border: 1.4px solid #0799F4;
    background: rgba(255,255,255,0.7);
    box-sizing: border-box;
    font-weight: 300;
    font-family: inherit;
    letter-spacing: 0.15em;
    transition: all 0.13s;
}

.counsel-form-input:focus,
.counsel-form-select:focus,
.counsel-form-textarea:focus {
    outline: none;
    border-color: #43a2f7;
    background: #eef7fe;
    box-shadow: 0 0 0 2px #bae2ff;
}

.request-type-select,
.counsel-email-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    letter-spacing: 0.15em;
    background: #fff url('/resources/images/comm/icon/arrow_down.svg') no-repeat right 10px center/24px 24px;
    cursor: pointer;
}

.request-type-select:focus,
.counsel-email-select:focus {
    background: #eaf2fe url('/resources/images/comm/icon/arrow_down.svg') no-repeat right 5px center/30px 30px;
}

.request-type-select::-ms-expand,
.counsel-email-select::-ms-expand { display: none; }

.counsel-form-input:read-only {
    background: #f4f7fa;
    color: #333;
}

/* 이메일 입력 1행 */
.counsel-email-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.email-at {
    color: #868e96;
    font-weight: 500;
    font-size: 1.08em;
   /*  margin: 0 2px; */
}
.counsel-email-select {
    min-width: 128px;
    padding-right: 28px;
    margin-left: 10px;
}

/* [정리] 중복 속성 제거 (.counsel-form-select 에 통합) */
.request-type-select {
    min-width: 170px;
}

.file-cancel-btn {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #bdbdbd;
    font-size: 1.4rem;
    padding: 0;
    margin: 0;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    height: 32px;
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}
.file-cancel-btn:hover {
    background: #ffe0e0;
    color: #b80000;
}
/* .hidden-item {
    display: none;
} */
.required {
    color: #dc3545;
    font-weight: 500;
}

/* 텍스트영역 */
.counsel-form-textarea {
    resize: vertical;
    min-height: 180px;
    font-size: 1.09rem;
    height: auto;
}

/* 반응형 */
@media (max-width: 1200px) {
    .counsel-section-wrap {
        flex-direction: column;
        gap: 32px;
        padding: 0 0 24px 0;
    }
    .counsel-left-category, .counsel-right-category {
        max-width: 100%; width: 100%;
        border-radius: 14px;
    }
    .promotion-info-title, .counsel-info-title {
        padding: 30px 18px 0 18px;
    }
    .counsel-personal-section, .counsel-company-section {
        padding: 0 18px;
    }
}
@media (max-width: 700px) {
    .page-category-wrap, .counsel-section-wrap {
        padding-left: 3px; padding-right: 3px;
    }
    .promotion-phone-section, .counsel-form-input-area, .agreement-info-wrap {
        padding: 10px;
    }
    .counsel-info-title, .promotion-info-title {
        padding: 19px 6px 0 6px;
        font-size: 1.03rem;
    }
    .counsel-form-row label {
        font-size: 0.96rem;
    }
    .counsel-form-input, .counsel-form-select, .counsel-form-textarea {
        font-size: 1rem;
        padding: 8px 7px;
    }
    .counsel-form-flex-row {
        flex-direction: column;
        align-items: stretch; /* 아이템들이 수직으로 쌓일 때 양 옆으로 꽉 차도록 */
        gap: 20px; /* 수직으로 쌓일 때도 동일한 행 간격 적용 */
    }
}


/* 화물운송 절차 안내 */
.transit-process-section {
  width: 100%;
  background: #f7f8f9;
}

.transit-process-wrapper {
  max-width: 1640px;
  margin: 0 auto;
  /* height: 760px; */    /* 720~740 범위 반영 */
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* 제목 */
.transit-process-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0 30px 30px 30px;
  padding: 50px 45px 50px 45px;
}
.transit-process-title-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.transit-process-title-icon img {
  width: 24px;
  height: 24px;
  display: block;
  margin-right: 0;
}

/* 단계 영역 */
.transit-process-steps {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 90px;          /* 데스크탑 gap은 72px 정도 추천, 150px은 너무 벌어질 수 있음 */
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
}

.transit-step-box {
  width: 235px;
  height: 500px;       /* 원하시는 크기(반응형에서 줄어듦) */
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}

/* 단계별 컬러: (원/desc, 각자 다르게) */
.transit-step-box:nth-child(1) .transit-step-circle { background: linear-gradient(135deg, #ffb16a 0%, #ffa500 100%);}
.transit-step-box:nth-child(1) .transit-step-desc   { background: linear-gradient(135deg, #ffe0ba 70%, #ffd699 100%);}
.transit-step-box:nth-child(2) .transit-step-circle { background: linear-gradient(135deg, #7fe183 0%, #14c78a 100%);}
.transit-step-box:nth-child(2) .transit-step-desc   { background: linear-gradient(135deg, #cdf6d4 70%, #9be6b5 100%);}
.transit-step-box:nth-child(3) .transit-step-circle { background: linear-gradient(135deg, #6cb8f6 0%, #206bde 100%);}
.transit-step-box:nth-child(3) .transit-step-desc   { background: linear-gradient(135deg, #d2eaff 70%, #b3d8f6 100%);}
.transit-step-box:nth-child(4) .transit-step-circle { background: linear-gradient(135deg, #b9b4ff 0%, #645af7 100%);}
.transit-step-box:nth-child(4) .transit-step-desc   { background: linear-gradient(135deg, #eceaff 70%, #cec7f9 100%);}

/* 원형 */
.transit-step-circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 600;
  box-shadow: 0 4px 18px 0 rgba(0,0,0,0.09);
  margin-bottom: 40px;
  flex-shrink: 0;
}
.transit-step-circle img {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
}
.transit-step-title {
  font-size: 1.15rem;
  font-weight: bold;
  text-align: center;
  margin: 0;
}

/* 설명 박스 */
.transit-step-desc {
  width: 215px;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 14px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.06);
  padding: 10px 10px 10px 10px;
  margin-top: 0;
  position: relative;
  background: #f6f9fc;
}

/* desc-title */
.transit-step-desc-title {
  font-size: 1.15rem;
  font-weight: bold;
  color: #3e5e99;
  padding: 10px;
  margin-bottom: 15px;
  text-align: center;
  width: 100%;
  align-self: center;
}

/* ul, li 심볼 스타일 */
.transit-step-desc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
  width: 100%;
}
.li-main {
  font-size: 1.01rem;
  color: #22324c;
  margin-bottom: 13px;
  line-height: 1.7;
  position: relative;
  padding-left: 20px;
}
.li-main::before {
  content: '●';
  /* color: #ff9800; */
  position: absolute;
  left: 0;
  font-size: 1.12em;
}
/* ========================================= */
/* 🚨 [추가] 각 단계별 글머리 기호(●) 색상 적용 */
/* ========================================= */
.transit-step-box:nth-child(1) .li-main::before { color: #ffa500; } /* 1단계: 주황 */
.transit-step-box:nth-child(2) .li-main::before { color: #14c78a; } /* 2단계: 녹색 */
.transit-step-box:nth-child(3) .li-main::before { color: #206bde; } /* 3단계: 파랑 */
.transit-step-box:nth-child(4) .li-main::before { color: #7c73f9; } /* 4단계: 보라 */

.li-sub {
  font-size: 0.95rem;
  color: #22324c;
  margin-bottom: 4px;
  line-height: 1.7;
  position: relative;
  padding-left: 25px;
}
.li-sub::before {
  content: '–';
  color: #6c7a89;
  position: absolute;
  left: 10px;
  font-size: 1.05em;
}

@media (max-width: 1200px) {
  .transit-process-wrapper {
    height: auto;
    padding: 0 8px;
  }
  .transit-process-title {
    font-size: 1.06rem;
    padding: 32px 0 0 0;
  }
  .transit-process-steps {
    gap: 26px;
  }
  .transit-step-box {
    width: 180px;
    height: 370px;
  }
  .transit-step-circle {
    width: 90px;
    height: 90px;
  }
  .transit-step-desc {
    width: 160px;
    padding: 7px 7px 7px 7px;
  }
}

@media (max-width: 800px) {
  .transit-process-wrapper {
    height: auto;
    padding: 0 4vw;
  }
  .transit-process-title {
    font-size: 0.96rem;
    margin: 0 10px 30px 10px;
    padding: 24px 0 0 0;
  }
  .transit-process-steps {
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 0;
  }
  .transit-step-box {
    width: 97vw;
    max-width: 330px;
    height: auto;
    margin: 0 auto 20px auto;
  }
  .transit-step-circle {
    width: 74px;
    height: 74px;
  }
  .transit-step-desc {
    width: 95vw;
    max-width: 300px;
    padding: 8px 8px 8px 8px;
  }
}
@media (max-width: 520px) {
  .transit-process-title {
    font-size: 0.85rem;
    margin-bottom: 16px;
    padding: 16px 0 0 0;
  }
  .transit-step-box {
    max-width: 99vw;
  }
  .transit-step-desc {
    max-width: 98vw;
    font-size: 0.86rem;
    padding: 4px 4px 4px 4px;
  }
}


/* pages/home/vehicleInfo.css (화물차량 안내) */
.vehicleInfo-section {
    width: 100%;
    background: #f7f8f9;
  }
.vehicleInfo-wrapper {
  max-width: 1640px;
  margin: 0 auto;
  background: #fff;
  /* padding: 0 24px; */
}
.vehicleInfo-title {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin: 0 30px 30px 30px;
  padding: 50px 45px 50px 45px;
}
.vehicleInfo-title-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.vehicleInfo-title-icon img {
  width: 26px; height: 26px; display: block;
}

.vehicleInfo-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 2열 카드형 */
  gap: 40px 30px; /* 행, 열 간격 */
  padding: 10px 75px 50px 75px;
}
.vehicleInfo-item {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
  padding: 0;
  transition: box-shadow 0.2s;
}


.vehicleInfo-item:hover {
  box-shadow: 0 6px 22px 0 rgba(60,60,90,0.09);
}


.vehicleInfo-imgbox {
  width: 300px;
  height: 190px;
  flex-shrink: 0;
  border-radius: 15px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9f9f9;
  margin-right: 15px;
  transition: width 0.2s, height 0.2s;
  border: 1px solid #dccdf6; /* 밝은 연보라색 추천 */
}
.vehicleInfo-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 핵심 */
  border-radius: 13px;
  display: block;
}
.vehicleInfo-descbox {
  flex: 1 1 0;
  min-width: 0;
  background: #e7d5f8;
  border-radius: 15px;
  padding: 10px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
}


.vehicleInfo-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13px;
  display: block;
}


.vehicleInfo-name {
  font-size: 1.14rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: #3d2363;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* .vehicleInfo-name i {
  font-size: 1.2em;
  color: #5d409d;
  margin-right: 6px;
} */
.vehicleInfo-desc {
  list-style: none;
  margin: 0;
  padding-left: 15px
}
.vehicleInfo-desc li {
  font-size: 1.01rem;
  color: #332c37;
  margin-bottom: 7px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
/* .vehicleInfo-desc li i {
  color: #ad79e4;
  margin-top: 2px;
} */


/* 반응형 */
@media (max-width: 1050px) {
  .vehicleInfo-list {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* 모바일 */
@media (max-width: 900px) {
  .vehicleInfo-item {
    flex-direction: column;  /* 이미지(위), 설명(아래) */
    align-items: stretch;
    padding: 0;
  }
  .vehicleInfo-imgbox {
    width: 100%;
    height: 38vw;   /* 화면 크기에 비례해 자동조정 */
    max-height: 170px;
    margin-right: 0;
    margin-bottom: 16px;
  }
  .vehicleInfo-descbox {
    width: 100%;
    border-radius: 0 0 15px 15px;
    padding: 14px 12px 14px 12px;
  }
}

@media (max-width: 600px) {
  .vehicleInfo-title { font-size: 1rem; padding: 14px 0 8px 0; }
  .vehicleInfo-imgbox { height: 34vw; max-height: 120px; }
  .vehicleInfo-descbox { padding: 10px 6px 10px 8px; }
}