@charset "utf-8";

/* ==============================
   서브 공통 레이아웃
   ============================== */

/* 서브 전체 폭 & 여백 */
.sub_wrap {
    max-width: 1200px;
    margin: 60px auto 100px;
    padding: 0 20px;
}

/* 페이지 상단 제목 영역 */
.sub_page_head {
    margin-bottom: 40px;
}

.sub_page_head .sub_title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}

.sub_page_head .sub_title em {
    color: #e53935; /* ( 7일이상 가격문의 )처럼 강조 */
    font-style: normal;
    margin-left: 4px;
}

.sub_page_head .sub_desc {
    font-size: 15px;
    color: #666;
}

/* ==============================
   요금표 공통 영역
   ============================== */

/* 요금 섹션 하나(경차 / 준중형 / 중형 등) */
.fee_section {
    margin-top: 60px;
}

/* 섹션 타이틀(경차, 준중형, 중형) + 안내 문구 */
.fee_section_head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.fee_section_head .fee_title {
    font-size: 20px;
    font-weight: 700;
    color: #2b4b73;  /* 파란 계열 제목 */
}

.fee_section_head .fee_note {
    font-size: 12px;
    color: #999;
    text-align: right;
}

/* 테이블 감싸는 영역 – 모바일에서 좌우 스크롤 */
.fee_table_wrap {
    border: 1px solid #d6dde7;
    border-radius: 2px;
    overflow: hidden;
}

.fee_table_scroll {
    overflow-x: auto;
}

/* ==============================
   요금표 테이블 스타일
   ============================== */

.tbl_fee {
    width: 100%;
    min-width: 800px; /* 좁은 화면에서 가로 스크롤 */
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 14px;
}

.tbl_fee thead th {
    padding: 12px 10px;
    background-color: #4f79a6;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid #d6dde7;
    border-right: 1px solid #d6dde7;
    font-weight: 500;
}

.tbl_fee thead th:last-child {
    border-right: none;
}

/* 첫 번째 헤더(차량명) 폭 좀 더 넓게 */
.tbl_fee thead th:first-child {
    width: 28%;
}

/* 바디 셀 */
.tbl_fee tbody td {
    padding: 10px 10px;
    text-align: center;
    border-bottom: 1px solid #e3e8f0;
    border-right: 1px solid #e3e8f0;
    background-color: #fff;
}

.tbl_fee tbody td:last-child {
    border-right: none;
}

/* 차량명 컬럼은 좌측 정렬 */
.tbl_fee tbody td.car_name {
    text-align: left;
    padding-left: 16px;
}

/* 행 홀수/짝수 배경 살짝 차이 */
.tbl_fee tbody tr:nth-child(odd) td {
    background-color: #f9fbff;
}

/* 숫자 컬럼(가격) */
.tbl_fee tbody td.price {
    font-family: inherit;
    letter-spacing: 0.02em;
}

/* ==============================
   반응형
   ============================== */

@media (max-width: 1024px) {
    .sub_wrap {
        margin: 40px auto 80px;
    }

    .sub_page_head .sub_title {
        font-size: 26px;
    }
}

@media (max-width: 768px) {
    .sub_wrap {
        padding: 0 15px;
    }

    .fee_section {
        margin-top: 40px;
    }

    .sub_page_head .sub_desc {
        font-size: 14px;
    }

    .fee_section_head {
        flex-direction: column;
        gap: 4px;
    }

    .fee_section_head .fee_note {
        text-align: left;
    }
}