/*
=============================================================
====== [SKIN] assets/css/mocar-modern.css ==================
=============================================================
올림모카(olym_mocar) home 영역 클린 블루 모던 스킨.
views/home/layout/head.php 의 developer's css 마지막에서 로드 —
common.css 이후에 덮어쓰기(override) 방식으로 동작.

- 전략  : 기존 마크업·PHP 분기 불변, CSS override 중심.
          jQuery 의존 ID/클래스(deps-audit §1)는 스타일 타겟으로만 사용.
- 단위  : px 고정(rem 사용 금지 — 설계서 §6 규칙).
- !important : 기존 CSS가 !important를 먼저 선언한 경우에만 최소 사용.
- 하드코딩 금지 : 도메인·IP·URL 없음.
- 모바일 카드 변환 : opt-in 방식 — .list_table.m-cards 클래스가 있는
  테이블에서만 동작(3b~3d 단계에서 data-label + m-cards 클래스 추가 예정).
  아직 마크업 작업이 없는 테이블은 깨지지 않는다.

2026-06-10 Ver_1.0 [작성자:Claude / Phase 3a]

§13 메인 히어로, §14 특징 카드, §15 요청 상세·댓글 보정 추가
2026-06-10 Ver_1.1 [작성자:Claude / Phase 3b]

§16 auth·member 국소 보정 추가
(login 로고/버튼, join_select 가입유형 그리드, join_wrap 고정폭 해제,
 btn-info/btn-primary/btn-secondary 통일, 체크박스, panel-body,
 danger 인라인 버튼 텍스트 보정, fav_garage_list 패널 내부)
2026-06-10 Ver_1.2 [작성자:Claude / Phase 3c]

§17 board·cash 보정 추가
(bootstrap 모달 공통 모던화 — 출금/약관/방침/구획 모달 일괄 적용,
 모달 내부 버튼 톤 통일(.modal-content 스코프 — content_wrap 밖 모달 대응),
 공지 view 테이블(table-bordered)·summernote 본문 타이포 기본값,
 캐쉬 요약 영역(라벨+금액) 칩 스타일)
2026-06-10 Ver_1.3 [작성자:Claude / Phase 3d]

form-control 고정높이 해제(custom-style.css의 height:40px/line-height:40px 충돌 —
 select 선택 텍스트가 아래로 밀려 잘리던 문제 수정),
.footer_wrap 동명 충돌 수정(사이트 푸터 #ft 스코프 한정 + 목록 페이지네이션 래퍼 리셋),
목록 th 배경 또렷하게(#eef2f7)·상태 컬럼(td[data-label="상태"]) 강조 — 체감 보강
2026-06-11 Ver_1.4 [작성자:Claude]

§18 요청 폼(.request_car) PC 폭 확대(500px→920px) + 서브그룹 정비
(출발지·도착지·지정공업사 라벨(label.form-control) 줄바꿈 해소·평라벨화,
 연속 행 간격 추가 — readonly 박스 붙음 해소, 모바일 1열 정리)
2026-06-11 Ver_1.5 [작성자:Claude]

§19 모바일 햄버거 메뉴 → 우측 드로어(off-canvas) 전환
(부트스트랩 navbar-collapse 를 ~991.98px 에서 우측 풀높이 슬라이드 패널로 override,
 딤 백드롭 + 사용자 카드(아바타·인사말·마이페이지/로그아웃) 상단 + 메뉴 리스트.
 PC(≥992px)는 기존 가로 GNB 그대로 — 미디어쿼리로 완전 분리)
2026-06-18 Ver_1.6 [작성자:Claude]

§20 좁은 폭(≤767px) 전역 잘림 보정 — Galaxy Z Fold 접힘(280px)까지 전수조사 반영
(① 닫힌 드로어 off-canvas 가 유발하던 문서 가로 스크롤 클립(body overflow-x:clip, §19),
 ② .join_wrap min-width:400px 해제 — 로그인·전 회원가입 폼·my_info·request/edit 좌측 잘림 해소(§16-10),
 ③ 사이트 푸터 좁은 폭 세로 스택(pl-5/pr-5·com_tel min-width 해제),
 ④ 목록 검색바 select ml-5 여백 제거 + 줄바꿈)
2026-06-18 Ver_1.7 [작성자:Claude]
*/

/* =============================================================
   §1. 디자인 토큰 (:root CSS 변수)
   - apply-design §3의 clean 테마 전체를 :root에 선언
   - html[data-theme="clean"] 는 향후 테마 전환 확장을 위해 병기
   ============================================================= */
:root,
html[data-theme="clean"] {
    /* 배경·서피스 */
    --bg: #f3f5f9;
    --surface: #ffffff;
    --surface-2: #f8fafc;

    /* 텍스트 */
    --text: #191f28;
    --text-sub: #6b7684;
    --text-faint: #8b95a1;

    /* 선·구분선 */
    --line: #e8ecf2;

    /* 주색 (Primary — 토스 블루) */
    --primary: #3182f6;
    --primary-hover: #1c6fe8;
    --primary-soft: #e8f1fe;

    /* 상태색 */
    --ok: #16a571;      --ok-soft: #e6f6ef;
    --warn: #d77e00;    --warn-soft: #fdf3e3;
    --danger: #e5484d;  --danger-soft: #fdebec;
    --neutral: #6b7684; --neutral-soft: #f0f3f6;

    /* 라운드·그림자 */
    --radius-lg: 20px;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(16,30,54,.04), 0 8px 24px rgba(16,30,54,.06);

    /* 헤더·히어로·푸터 */
    --header-bg: rgba(255,255,255,.85);
    --hero-bg: linear-gradient(130deg,#0b2f66 0%,#1556a8 45%,#3182f6 100%);
    --hero-text: #ffffff;
    --hero-sub: rgba(255,255,255,.88);
    --footer-bg: #ffffff;
}


/* =============================================================
   §2. body — 배경·폰트
   - layout.css의 body{background:#fff; font-family:Pretendard-Regular} 를 override
   ============================================================= */
body {
    background: var(--bg);
    font-family: 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--text);
    line-height: 1.55;
}


/* =============================================================
   §3. navbar — 스티키 + 블러 + 모던 GNB
   - 기존 .navbar, .navbar-brand img, .navbar-nav .nav-link 를 타겟
   - common.css의 .navbar{max-width:1140px; margin:0 auto;} 는 유지
   ============================================================= */

/* 3-1. 헤더 컨테이너: position:sticky + 백드롭 블러 */
#header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--header-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    /* 기존 border-bottom:#dbdde2 덮어쓰기 */
    width: 100%;
}

/* 3-2. 로고 이미지 크기 통일 */
.navbar .navbar-brand img {
    height: 34px;
    width: auto;
}

/* 3-3. GNB 링크 — 라운드 호버 (primary-soft) */
.navbar-nav .nav-link {
    border-radius: 10px;
    padding: 8px 14px;
    color: var(--text-sub);
    font-weight: 600;
    font-size: 15px;
    transition: background 0.15s, color 0.15s;
}
/* 호버·활성 상태 */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    background: var(--primary-soft);
    color: var(--primary) !important; /* .nav-link.main:hover color 재정의 */
}

/* 3-4. 우측 car 버튼(navbar 내) */
.navbar .car {
    border-radius: var(--radius);
    background: var(--primary);
    color: #ffffff;
    padding: 8px 18px;
    font-weight: 700;
    font-size: 14px;
    transition: background 0.15s;
}
.navbar .car:hover {
    background: var(--primary-hover);
    color: #ffffff;
}


/* =============================================================
   §4. 버튼 패밀리
   - 기존 클래스(.btn-head/.btn-success/.btn-cancel/.btn_list/.btn_submit_type1) 스타일 override
   - common.css에 !important 선언이 있으므로 동일 specificity로 덮어쓰거나 !important 병용
   ============================================================= */

/* 4-1. btn-head — 아웃라인 스타일 */
.btn-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.btn-head:hover {
    background: var(--primary-soft) !important; /* 기존 !important 덮어쓰기 */
    border-color: var(--primary);
    color: var(--primary);
}

/* 4-2. btn-success — 주색 채움 */
.btn-success {
    background: var(--primary) !important; /* 기존 #2090ff !important 덮어쓰기 */
    border-color: var(--primary) !important;
    border-radius: var(--radius);
    color: #ffffff;
    font-weight: 700;
    padding: 11px 22px;
    transition: background 0.15s;
}
.btn-success:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* 4-3. btn-cancel — 중립 */
.btn-cancel {
    background: var(--neutral-soft) !important; /* 기존 #ececec !important */
    border-radius: var(--radius);
    color: var(--text-sub);
    font-weight: 700;
    padding: 11px 22px;
    border: 1px solid var(--line);
    transition: background 0.15s;
}
.btn-cancel:hover {
    background: var(--line) !important;
    color: var(--text);
}

/* 4-4. btn_list — 목록 이동 버튼 */
.btn_list {
    background: var(--neutral-soft) !important; /* 기존 #ececec !important */
    border: 1px solid var(--line) !important;
    border-radius: var(--radius) !important;
    color: var(--text-sub);
    font-weight: 700;
    font-size: 14px !important; /* 기존 15px !important 재정의 */
    padding: 10px 24px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: background 0.15s, color 0.15s;
}
.btn_list:hover {
    background: var(--line) !important;
    color: var(--text) !important;
    text-decoration: none;
}

/* 4-5. btn_submit_type1 — 폼 제출용 전폭 버튼 */
.btn_submit_type1 {
    background: var(--primary) !important; /* 기존 #2090ff !important */
    border-radius: var(--radius);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    padding: 13px 0;
    display: block;
    width: 100%;
    text-align: center;
    transition: background 0.15s;
}
.btn_submit_type1:hover {
    background: var(--primary-hover) !important;
    color: #ffffff;
}


/* =============================================================
   §5. title_wrap / page_title — 페이지 타이틀 영역
   - 기존 .title_wrap, .page_title 스타일 override
   ============================================================= */

/* 5-1. 타이틀 래퍼 */
.title_wrap {
    width: 100%;
    border-bottom: 1px solid var(--line); /* 기존 #dbdde2 → 토큰 */
    padding: 28px 0 18px;
    margin-bottom: 24px;
}

/* 5-2. 페이지 타이틀 텍스트 */
.page_title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text);
}


/* =============================================================
   §6. 카드 컴포넌트
   - .panel, .join_wrap, .box_type1, .box_type2, .request_detail_wrap 카드화
   - 라운드 20px + 얇은 보더 + 소프트 그림자
   ============================================================= */

/* 6-1. 패널(일반 콘텐츠 박스) */
.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 28px;
}

/* 6-2. 회원가입·로그인 래퍼 */
.content_wrap .join_wrap {
    background: var(--surface);
    border: 1px solid var(--line) !important; /* 기존 border #dbdde2 */
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow);
    padding: 40px 36px;
    margin-top: 40px;
}

/* 6-3. box_type1 — 마이페이지 카드(아웃라인) */
.container_wrap.mypage .wrap .box_type1 {
    background: var(--surface);
    border: 2px solid var(--primary) !important; /* 기존 3px → 2px 슬림화 */
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow);
    transition: box-shadow 0.15s;
}
.container_wrap.mypage .wrap .box_type1:hover {
    box-shadow: 0 4px 20px rgba(49,130,246,.18);
}

/* 6-4. box_type2 — 마이페이지 카드(채움) */
.container_wrap.mypage .wrap .box_type2 {
    background: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow);
    transition: background 0.15s, box-shadow 0.15s;
}
.container_wrap.mypage .wrap .box_type2:hover {
    background: var(--primary-hover) !important;
    box-shadow: 0 4px 20px rgba(49,130,246,.28);
}

/* 6-5. request_detail_wrap — 요청 상세 래퍼 */
.content_wrap .request_detail_wrap {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
/* request_detail 내부 padding */
.content_wrap .request_detail {
    border: none; /* 기존 border:1px #dbdde2 solid → 부모 카드가 보더 담당 */
    padding: 24px;
}


/* =============================================================
   §7. form-control — 입력 필드 포커스 링
   - .form-control (+ select, textarea) 에 1.5px 보더, 포커스 링
   - common.css의 .form-control{border:1px #dbdde2 solid !important;} override
   ============================================================= */
.form-control {
    border: 1.5px solid var(--line) !important;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
    background: var(--surface);
    padding: 10px 13px;
    transition: border-color 0.15s, box-shadow 0.15s;
    /* custom-style.css:12985의 height:40px/line-height:40px 고정 해제 —
       고정 높이 + 패딩 10px 조합으로 select 선택 텍스트가 아래로 밀려 잘리는 문제 수정(2026-06-11) */
    height: auto;
    line-height: 1.45;
}
.form-control::placeholder {
    color: var(--text-faint);
}
/* 포커스 링 (primary-soft 3px) */
.form-control:focus {
    outline: none;
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}

/* select.form-control 커스텀 화살표 */
select.form-control {
    -webkit-appearance: none;
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-faint) 50%),
        linear-gradient(135deg, var(--text-faint) 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    padding-right: 38px;
    cursor: pointer;
}
/* textarea */
textarea.form-control {
    resize: vertical;
    min-height: 100px;
}


/* =============================================================
   §8. col-form-label — 폼 라벨
   - 색·굵기만 조정(구조 불변)
   ============================================================= */
.col-form-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-sub);
}


/* =============================================================
   §9. list_table — 모던 테이블
   - PC: 헤더 surface-2, 행 호버 primary-soft
   - 모바일 카드 변환: opt-in 방식 (.list_table.m-cards 클래스 병용 시에만 활성)
     → 3b~3d에서 각 목록 테이블에 m-cards 클래스 + td[data-label] + m-head/m-hide 추가 예정.
     → 아직 작업 전 테이블(.list_table 단독)은 이 섹션의 모바일 변환이 적용되지 않으므로 깨지지 않음.
   ============================================================= */

/* 9-1. 테이블 공통 */
.list_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    overflow: hidden; /* 라운드 적용 */
    box-shadow: var(--shadow);
}

/* 9-2. TH — 헤더 배경(본문과 또렷이 구분되도록 surface-2보다 한 단계 진하게. 2026-06-11 체감 보강) */
.list_table th {
    background: #eef2f7 !important; /* 기존 #f7f7f7 override */
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 700;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    border-top: none; /* 기존 border-top:1px solid #dee2e6 제거 */
    white-space: nowrap;
    text-align: left;
}

/* 9-3. TD */
.list_table td {
    padding: 14px 16px;
    border-top: none; /* 기존 border-top 제거 */
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: var(--text);
    vertical-align: middle; /* 기존 vertical-align:top 재정의 */
}

/* 9-4. 행 호버 */
.list_table tbody tr {
    cursor: pointer;
    transition: background 0.12s;
}
.list_table tbody tr:hover {
    background: var(--primary-soft);
}

/* 9-4b. 상태 컬럼 강조 — data-label 속성 활용(PC·모바일 공통, 2026-06-11 체감 보강)
   상태값별 색 구분은 마크업(span) 필요라 보류 목록 — 여기선 일관 강조만 */
.list_table td[data-label="상태"] {
    font-weight: 700;
    color: var(--primary);
}

/* 9-5. 마지막 행 하단 보더 제거 */
.list_table tbody tr:last-child td {
    border-bottom: none;
}

/* ----- 9-6. 카드 변환 (opt-in: .list_table.m-cards 클래스 병용 시에만 동작) -----
   ⚠ 브레이크포인트 768→991.98px 확대(2026-06-18): th{white-space:nowrap} 라 컬럼 많은 목록
   테이블(요청목록 10컬럼)이 최소폭 ~780px → 769~991px 태블릿 구간에서 컨테이너를 넘침.
   이 구간도 카드로 변환해 넘침 차단. 데스크톱(≥992px)만 풀테이블. */
@media (max-width: 991.98px) {

    /* thead 숨기기 — m-cards 클래스가 있을 때만 */
    .list_table.m-cards thead {
        display: none;
    }

    /* table·tbody 블록 전환 */
    .list_table.m-cards,
    .list_table.m-cards tbody {
        display: block;
        width: 100%;
    }

    /* 각 행 → 카드 */
    .list_table.m-cards tbody tr {
        display: flex;
        flex-direction: column;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 16px 18px;
        margin-bottom: 12px;
        cursor: pointer;
    }

    /* 카드 내 td — flex 라벨+값 */
    .list_table.m-cards tbody td {
        border: none;
        border-bottom: none;
        padding: 4px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        white-space: normal; /* 카드 모드 줄바꿈 허용 */
        font-size: 13px;
    }

    /* data-label 속성 → ::before 라벨 표시 */
    .list_table.m-cards tbody td[data-label]::before {
        content: attr(data-label);
        color: var(--text-faint);
        font-size: 12px;
        font-weight: 600;
        flex: none;
        min-width: 72px; /* 라벨 최소폭 — 정렬 통일 */
    }

    /* m-head: 카드 헤더 셀 — 맨 위, 큰 글씨 */
    .list_table.m-cards tbody td.m-head {
        order: -1;
        font-size: 16px;
        font-weight: 800;
        padding-bottom: 10px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--line) !important;
        color: var(--text);
    }
    /* 카드 헤더는 라벨(::before) 없이 */
    .list_table.m-cards tbody td.m-head::before {
        display: none;
    }

    /* m-hide: 모바일에서 생략할 보조 컬럼 */
    .list_table.m-cards tbody td.m-hide {
        display: none;
    }
}

/* ----- 9-6b. 태블릿(600~991.98px) — 카드 2열 그리드 -----
   카드 변환을 991까지 확대하면 단일 컬럼 카드가 너무 넓어져 휑하므로,
   폭이 충분한 600px 이상에선 2열 그리드로 배치(≤599 는 1열 유지). */
@media (min-width: 600px) and (max-width: 991.98px) {
    .list_table.m-cards tbody {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: start;
    }
    .list_table.m-cards tbody tr {
        margin-bottom: 0; /* 그리드 gap 이 간격 담당 */
    }

    /* 예외: 게시판(공지사항 등) 목록은 카드여도 한 줄에 하나 — 게시판 특성상 2열은 어색.
       제목 컬럼(td[data-label="제목"])으로 게시판 목록을 식별해 2열 그리드에서 제외(1열 유지). */
    .list_table.m-cards:has(td[data-label="제목"]) tbody {
        display: block;
    }
    .list_table.m-cards:has(td[data-label="제목"]) tbody tr {
        margin-bottom: 12px;
    }
}

/* ----- 9-7. 데스크톱(≥992px) 넓은 표 가로 스크롤 가드 -----
   컬럼이 많은 표(예: 제휴 요청목록 list_assoc 13컬럼 → 최소폭 ~976px)는 부트스트랩 컨테이너가
   960px(992~1199구간)일 때 페이지 전체를 가로로 넘치게 한다. 표의 직접 부모(.mb-md)만 가로
   스크롤 컨테이너로 만들어, 페이지 대신 '표 영역'만 스크롤되게 한다.
   - overflow-x:auto 는 표가 부모보다 넓을 때만 스크롤바 노출 → 좁은 표(요청목록 등)는 무동작.
   - ≤991 카드 모드에선 표가 display:block(전폭)이라 넘치지 않음 → 역시 무동작.
   - :has 미지원 구형 웹뷰는 규칙 미적용(기존 동작) — 카드(≤991)·≥1200 정상이라 영향 적음. */
.mb-md:has(> table.list_table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


/* =============================================================
   §10. pagination — 페이지네이션
   - CI 기본 출력 마크업: <ul class="paging_wrap">…<li class="paging_on">…</li>
   - footer_wrap 안에 .paging_wrap 이 있는 구조 (common.css 확인)
   ============================================================= */

/* 10-1. 페이지네이션 wrapper */
.footer_wrap .paging_wrap {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 22px 0;
    list-style: none;
    flex-wrap: wrap;
    margin: 0;
}

/* 10-2. 각 페이지 아이템 */
.footer_wrap .paging_wrap > li {
    border: none;
    margin-right: 0; /* 기존 margin-right:10px → gap 으로 대체 */
}

/* 10-3. 링크·현재 페이지 공통 */
.footer_wrap .paging_wrap > li > a,
.footer_wrap .paging_wrap > li > strong {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-sub);
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    line-height: 1; /* 기존 line-height:40px 재정의 */
    width: auto;    /* 기존 width:40px height:40px 재정의 */
}

/* 10-4. 링크 호버 */
.footer_wrap .paging_wrap > li > a:hover {
    background: var(--neutral-soft);
    color: var(--text);
}

/* 10-5. 현재 페이지 강조 */
.footer_wrap .paging_wrap > li.paging_on > a,
.footer_wrap .paging_wrap > li.paging_on > strong {
    background: var(--primary); /* 기존 #41c9ff → 주색 */
    border: none;               /* 기존 border:2px solid #41c9ff */
    color: #ffffff;
    font-weight: 700;
}


/* =============================================================
   §11. footer_wrap / com_info / com_tel — 푸터
   - 기존 .footer_wrap, .com_info, .com_tel, .btn_footer 스타일 override
   ============================================================= */

/* 11-1. 푸터 래퍼
   ⚠ .footer_wrap 은 사이트 푸터(footer.php)와 목록 페이지네이션 래퍼(list.php 등
   <div class="text-center footer_wrap">)가 같은 이름을 공유한다(동명 충돌).
   사이트 푸터는 index.php의 <footer id="ft"> 안에만 로드되므로 #ft 로 스코프 한정.
   (무스코프 시 목록 페이지네이션 위에 margin-top:64px 빈 공간이 생김 — 2026-06-11 수정) */
#ft .footer_wrap {
    background: var(--footer-bg);
    border-top: 1px solid var(--line); /* 기존 #dbdde2 */
    margin-top: 64px;
    padding-top: 0; /* 기존 padding-top:20px 재정의 — 내부 영역에서 처리 */
    width: 100%;
}
/* 목록 페이지네이션 래퍼(.panel-footer 안 .footer_wrap)는 푸터 스타일과 무관하게 리셋 */
.panel-footer .footer_wrap {
    background: transparent;
    border-top: 0;
    margin-top: 0;
    padding: 6px 0 0;
}

/* 11-2. 푸터 컨테이너(max-width 유지) */
.footer_container {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    padding: 36px 20px;
}

/* 11-3. 회사 정보 텍스트 */
.com_info {
    font-size: 13px;
    color: var(--text-faint);
    line-height: 1.8;
    display: block; /* 기존 inline-block → block */
}

/* 11-4. 고객센터 전화번호 카드 */
.com_tel {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    min-width: 240px;
    float: none; /* 기존 float:right 해제 */
    display: inline-block;
}

/* 11-5. 푸터 버튼(이용약관·개인정보) */
.btn_footer .btn {
    font-size: 13px;
    color: var(--text-sub);
    background: transparent;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}
.btn_footer .btn:hover {
    color: var(--primary);
    background: var(--primary-soft);
}


/* =============================================================
   §12. 반응형 보조
   - 기존 @media 분기 보완 (767px 기준 유지)
   ============================================================= */
@media (max-width: 767px) {

    /* 12-1. 타이틀 */
    .page_title {
        font-size: 20px;
    }

    /* 12-2. 카드 내부 패딩 축소 */
    .content_wrap .join_wrap {
        padding: 24px 18px;
    }
    .panel {
        padding: 20px 16px;
    }

    /* 12-3. 푸터 세로 스택 */
    .footer_container {
        flex-direction: column;
        gap: 20px;
        padding: 24px 16px;
    }
    .com_tel {
        min-width: 0;
        width: 100%;
    }

    /* 12-4. 버튼 전폭 보정 */
    .btn-success,
    .btn-cancel,
    .btn_submit_type1 {
        width: 100%;
    }
}


/* =============================================================
   §13. 메인 히어로 (.mk-hero) — main/main.php 전용 (Phase 3b 추가)
   - 목업 01_main.html의 히어로 구현(그라데이션 배경 + 카피 + CTA + 차 SVG)
   - CTA 버튼: 기존 PHP 분기의 <a><button> 마크업을 그대로 스타일링
     → 첫 번째 버튼 = primary 채움 / 두 번째 = 고스트(테두리)
     ('30' 분기는 요청목록 단독 → 자동으로 primary)
   ============================================================= */

/* 13-1. 히어로 섹션(전폭 그라데이션) */
.mk-hero {
    background: var(--hero-bg);
    overflow: hidden;
}

/* 13-2. 내부 컨테이너(1140px 중앙 정렬) */
.mk-hero-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 72px 20px 80px;
}

/* 13-3. 카피 영역 */
.mk-hero-copy {
    flex: 1;
}
.mk-hero-copy h1 {
    margin: 0;
    font-size: 46px;
    font-weight: 900;
    letter-spacing: -1.5px;
    color: var(--hero-text);
    line-height: 1.2;
}
.mk-hero-sub {
    margin-top: 18px;
    font-size: 19px;
    line-height: 1.65;
    color: var(--hero-sub);
}

/* 13-4. CTA 버튼 영역 — PHP 분기 내 <a><button> 구조 그대로 타겟 */
.mk-hero-cta {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}
.mk-hero-cta a {
    text-decoration: none;
    display: inline-flex;
}
/* CTA 버튼 공통(분기 안 button 태그) */
.mk-hero-cta a button {
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    padding: 15px 32px;
    border-radius: var(--radius);
    transition: background 0.15s, opacity 0.15s, transform 0.06s;
}
.mk-hero-cta a button:active {
    transform: scale(0.98);
}
/* 첫 번째 버튼 — primary 채움 */
.mk-hero-cta a:first-child button {
    background: var(--primary);
    color: #ffffff;
}
.mk-hero-cta a:first-child button:hover {
    background: var(--primary-hover);
}
/* 두 번째 이후 버튼 — 히어로 고스트(투명 + 흰 테두리) */
.mk-hero-cta a:not(:first-child) button {
    background: transparent;
    color: var(--hero-text);
    border: 1.5px solid currentColor;
    opacity: 0.85;
}
.mk-hero-cta a:not(:first-child) button:hover {
    opacity: 1;
}

/* 13-5. 일러스트 영역(차 + 도로 + 플로팅 카드) — 장식 전용 */
.mk-hero-visual {
    flex: 1;
    position: relative;
    min-height: 300px;
}
/* 도로 점선 */
.mk-hero-visual .mk-road {
    position: absolute;
    left: 0; right: 0; bottom: 48px;
    height: 4px;
    border-radius: 2px;
    background: repeating-linear-gradient(90deg, var(--hero-sub) 0 30px, transparent 30px 54px);
    opacity: 0.45;
}
/* 차 SVG */
.mk-hero-visual svg.mk-car {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 60px;
    width: 380px;
}
/* 플로팅 미니 카드: 푸시 알림 미리보기 */
.mk-float-card {
    position: absolute;
    top: 8px; right: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 14px 36px rgba(2,32,71,.25);
    padding: 14px 18px;
    width: 250px;
}
.mk-float-card .mk-fc-top {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-faint);
}
.mk-float-card .mk-fc-ico {
    width: 26px; height: 26px;
    border-radius: 8px;
    flex: none;
    background: linear-gradient(150deg,#41c3f1,#1556a8);
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mk-float-card .mk-fc-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-top: 8px;
}
.mk-float-card .mk-fc-sub {
    font-size: 13px;
    color: var(--text-sub);
    margin-top: 2px;
}
/* 24시간 접수 배지 */
.mk-float-badge {
    position: absolute;
    left: 16px; top: 60px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary);
    box-shadow: 0 10px 26px rgba(2,32,71,.2);
}

/* 13-6. 히어로 반응형(목업과 동일 768px 분기) */
@media (max-width: 768px) {
    /* 히어로 세로 스택 */
    .mk-hero-inner {
        flex-direction: column;
        padding: 40px 18px 46px;
        gap: 24px;
    }
    .mk-hero-copy h1 {
        font-size: 31px;
    }
    .mk-hero-sub {
        font-size: 16px;
    }
    /* CTA 버튼 전폭 균등 분할 */
    .mk-hero-cta a {
        flex: 1;
    }
    .mk-hero-cta a button {
        width: 100%;
        padding: 14px 10px;
    }
    .mk-hero-visual {
        width: 100%;
        min-height: 230px;
    }
    .mk-hero-visual svg.mk-car {
        width: 270px;
        bottom: 40px;
    }
    .mk-hero-visual .mk-road {
        bottom: 32px;
    }
    .mk-float-card {
        right: 0;
        width: 226px;
    }
}

/* 13-6b. 배지 숨김 구간 — ≤991.98px.
   히어로는 769~1140px 에서 flex 좌우 2분할이라 좁아질수록 우측 visual 영역이 줄어,
   좌측 배지(.mk-float-badge top:60 left:16)와 우측 푸시카드(.mk-float-card 250px)가
   가로로 겹친다(약 ~925px 이하). 배지는 바로 아래 '24시간 차량 요청' 특징 카드와 의미가
   중복되는 장식(aria-hidden)이므로, 두 요소가 여유 있게 들어가는 992px 이상에서만 노출.
   (모바일 ≤768 스택 구간 포함 → 이 한 규칙으로 모바일·태블릿 모두 숨김) */
@media (max-width: 991.98px) {
    .mk-float-badge {
        display: none;
    }
}


/* =============================================================
   §14. 메인 특징 카드 3개 (.mk-features) — main/main.php 전용 (Phase 3b 추가)
   - 히어로 하단에 -34px 겹침 배치(목업 동일)
   ============================================================= */

/* 14-1. 그리드 컨테이너 */
.mk-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1140px;
    margin: -34px auto 56px;
    padding: 0 20px;
    position: relative; /* 히어로 그라데이션 위로 올라오도록 */
}

/* 14-2. 개별 카드 */
.mk-feature {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 26px;
}
/* 아이콘 박스 */
.mk-feature .mk-f-ico {
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.mk-feature h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}
.mk-feature p {
    margin: 0;
    font-size: 14px;
    color: var(--text-sub);
    line-height: 1.6;
}

/* 14-3. 특징 카드 반응형 — 1열 스택 */
@media (max-width: 768px) {
    .mk-features {
        grid-template-columns: 1fr;
        margin-top: 20px;
        margin-bottom: 36px;
        padding: 0 18px;
    }
}


/* =============================================================
   §15. 요청 상세(view/view_assoc)·댓글 영역 보정 (Phase 3b 추가)
   - 마크업 불변 — 기존 클래스 타겟 CSS override만
   - 댓글 스타일 원본은 chat.css(컨트롤러 headerelements로 이 파일 "이후" 로드)
     → .content_wrap 를 앞에 붙여 specificity 상향으로 override
   ============================================================= */

/* 15-0. 인라인 배경색 액션 버튼(요청취소 #d64742 / 재요청 #5bc0de) — 흰 글자 (Ver_1.5)
   view.php:315·323 이 인라인 style(background-color !important)로 배경만 바꾸는데
   .btn_list 기본 글자색(--text-sub 회색)이 그대로라 가독성이 없던 문제 보정.
   hover 시에도 인라인 배경(!important)이 유지되므로 글자색만 흰색 고정 + 밝기 변화. */
.btn_list[style*="background-color"] {
    color: #ffffff !important;
    border-color: transparent !important;
}
.btn_list[style*="background-color"]:hover {
    color: #ffffff !important;
    filter: brightness(0.92);
}

/* 15-1. 상세 정보 라벨/값 — 톤 통일 */
.content_wrap .request_detail .status_row .status_title,
.content_wrap .request_detail .info_row .info_title {
    color: var(--text-sub); /* 기존 #888 */
    font-size: 14px;
}
.content_wrap .request_detail .status_row .status_value,
.content_wrap .request_detail .info_row .info_value {
    color: var(--text); /* 기존 #121212 */
    font-size: 14px;
    font-weight: 600;
}

/* 15-2. 섹션 소제목(.title_sub1 — '요청정보' 등) */
.title_sub1 {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}

/* 15-3. 댓글 목록 래퍼 — 기존 하늘색(#e7f8fd) → 서피스-2 카드 */
.content_wrap .comment_list_wrap {
    background-color: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

/* 15-4. 댓글 입력창 — 포커스 링 입력 필드로 통일 */
.content_wrap .comment_write_area .comment_write_wrap input {
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 13px;
    font-size: 14px;
    color: var(--text);
    background: var(--surface);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.content_wrap .comment_write_area .comment_write_wrap input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

/* 15-5. 댓글 전송 버튼 — 기존 청록(#70c8e2) → primary */
.content_wrap .comment_write_area .comment_write_wrap button {
    background-color: var(--primary);
    border-radius: var(--radius);
    font-weight: 700;
    transition: background 0.15s;
}
.content_wrap .comment_write_area .comment_write_wrap button:hover {
    background-color: var(--primary-hover);
}

/* 15-6. 필수 표시 아이콘(i.require) — red → danger 토큰 */
.form-group i.require {
    color: var(--danger);
}


/* =============================================================
   §16. auth · member 국소 보정 (Phase 3c 추가)
   - 대상 뷰: auth/(login/join/join_assoc_com/join_select/join_select_sub/
              find_id/find_pw/pw_reset/join_success/find_id_result/
              approve_wait/pw_reset_result)
            + member/(mypage/my_info/leave/fav_garage_list/fav_garage_edit)
   - 원칙: 뷰 PHP 불변. 기존 §4~§8 이 이미 커버하는 항목은 재선언 안 함.
           인라인 style(background:red !important) 은 그대로 — 의미 유지.
   ============================================================= */

/* ----- 16-1. .login_logo — 로고 이미지 중앙 배치 -----
   login.php, find_id.php, find_pw.php 공통 */
.join_wrap .login_logo {
    text-align: center;
    margin-bottom: 24px;
}
.join_wrap .login_logo img {
    max-width: 180px;
    height: auto;
}

/* ----- 16-2. Bootstrap 기본 버튼(.btn-primary/.btn-secondary/.btn-info) 스킨 통일 -----
   - login.php: .btn.btn-primary(로그인), .btn.btn-secondary(아이디찾기/패스워드찾기)
   - join_select.php, join_select_sub.php: .btn.btn-info(가입유형 선택 버튼)
   - join_assoc_com.php: .btn.btn-info(인증)
   - 기존 Bootstrap 색상을 primary 토큰으로 override */
.content_wrap .btn.btn-primary,
.content_wrap .btn.btn-info {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff;
    border-radius: var(--radius);
    font-weight: 700;
    transition: background 0.15s, border-color 0.15s;
}
.content_wrap .btn.btn-primary:hover,
.content_wrap .btn.btn-info:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff;
}

/* .btn-secondary — 중립 버튼(취소/이동류) */
.content_wrap .btn.btn-secondary {
    background: var(--neutral-soft) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    color: var(--text-sub);
    font-weight: 700;
    transition: background 0.15s;
}
.content_wrap .btn.btn-secondary:hover {
    background: var(--line) !important;
    color: var(--text);
}

/* ----- 16-3. .join_wrap 인라인 width:500px 보정 -----
   join_success.php, find_id_result.php, approve_wait.php,
   pw_reset.php, my_info.php 에 style="width:500px" 가 인라인으로 붙어 있어
   좁은 화면에서 overflow 발생. max-width로 뷰포트 제한 추가(인라인 override 불가
   → 부모 컨테이너 overflow:hidden + 자신 max-width 100% 보완). */
.d-flex .join_wrap,
.join_wrap[style*="width"] {
    max-width: 100% !important; /* 뷰포트보다 넓어지지 않도록 */
    box-sizing: border-box;
}

/* ----- 16-4. .join_member / .join_title / .member_sel_box / .join_item -----
   join_select.php, join_select_sub.php 가입유형 선택 그리드 */

/* 16-4-1. 외부 래퍼 — 가운데 정렬 + 상하 여백 */
.join_member {
    max-width: 760px;
    margin: 40px auto;
    padding: 0 16px;
}

/* 16-4-2. 제목 */
.join_title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}

/* 16-4-3. 카드 그리드 — common.css `.join_member .member_sel_box{display:flex}`(특정도 0,2,0)를
   이기려고 동일 특정도(.join_member .member_sel_box)로 선언(뒤에 로드되어 승). flex 였던 레거시는
   `.join_item{width:calc(N%)}` + 모던 padding(content-box 초과)으로 모바일권에서 1열로 무너졌음.
   grid auto-fill minmax 는 폭에 따라 열수가 흐르고(3→2→1) box-sizing 안전. */
.join_member .member_sel_box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 16px;
    padding: 28px 20px; /* common.css 50px 30px 42px → 모던 균형 + 그리드 가용폭 확보(좁은 폭 2열 보존) */
}
/* common.css `.join_member .join_item{width:calc(..);margin:..}`(0,2,0) 무력화 — 폭/간격은 그리드 관할.
   flex 컬럼 + 버튼 하단 정렬: 여러 열일 땐 행 내 버튼 수평 정렬, 1열일 땐 카드가 자연 높이로 콤팩트
   (레거시 .join_item_text{min-height:120px} 의존 제거 → 짧은 텍스트 카드의 빈 공간 해소). */
.join_member .join_item {
    width: auto;
    margin: 0;
    box-sizing: border-box;
    min-width: 0; /* 긴 내용으로 인한 트랙 넘침 방지 */
    display: flex;
    flex-direction: column;
}
/* 설명 텍스트 — 레거시 min-height(120px) 해제. 행 높이 맞춤은 grid stretch + 버튼 margin-top:auto 가 담당 */
.join_member .join_item .join_item_text {
    min-height: 0;
}
/* 버튼(링크) 하단 고정 — 같은 행 카드끼리 버튼 라인 정렬 */
.join_member .join_item > a {
    margin-top: auto;
}

/* 16-4-4. 개별 유형 카드 */
.join_item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 24px 16px;
    text-align: center;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.join_item:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(49,130,246,.14);
}

/* 유형 설명 텍스트 */
.join_item .join_item_text {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.55;
    margin-bottom: 14px;
}

/* 유형 버튼 — 전폭 */
.join_item .btn {
    width: 100%;
}

/* ----- 16-5. .panel 내부 — panel-heading / panel-body 톤 보정 -----
   fav_garage_list.php: .panel > .panel-heading > h4 / .panel-body */

/* 16-5-1. panel-heading 배경·보더 */
.panel > .panel-heading {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* 패널 상단 라운드 유지 */
    padding: 14px 20px;
}
.panel > .panel-heading .panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

/* 16-5-2. panel-body 패딩 */
.panel > .panel-body {
    padding: 20px;
}

/* 16-5-3. panel-footer 패딩 */
.panel > .panel-footer {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    padding: 12px 20px;
}

/* ----- 16-6. .form-check — 약관 체크박스·라벨 -----
   join.php, join_assoc_com.php 의 약관동의/개인정보 동의 체크박스.
   ⚠ 부트스트랩 .form-check-input 은 position:absolute + margin-left:-1.25rem 로
   .form-check 의 좌측 패딩 안에 놓이도록 설계됨 → padding-left 를 0으로 두면 체크박스가
   컨테이너 왼쪽 가장자리를 20px 넘어가 잘린다. padding-left:24px 로 체크박스 자리 확보. */
.form-check {
    padding: 12px 0 12px 24px;
    border-top: 1px solid var(--line);
    margin-top: 8px;
}
/* 체크박스 — 라벨 텍스트(24px) 와의 간격을 위해 좌측 4px 지점에 배치(-1.25rem 보정 결과) */
.form-check .form-check-input {
    margin-left: -20px;
}
.form-check-label {
    font-size: 14px;
    color: var(--text-sub);
    cursor: pointer;
}
/* 약관 링크 */
.form-check-label a.terms,
.form-check-label a.policy {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
}
.form-check-label a.terms:hover,
.form-check-label a.policy:hover {
    text-decoration: underline;
}

/* ----- 16-7. danger 인라인 버튼 텍스트 색상 보정 -----
   my_info.php #leaveBtn, fav_garage_edit.php .del_btn:
   style="background:red !important" 인라인 불변(의미 유지: 위험=빨강).
   단 텍스트가 어두운 회색이면 안 보이므로 흰색으로 보정.
   더 구체적인 셀렉터(ID 기반) 사용 — !important 필요 없이 이김. */
#leaveBtn,
button.del_btn {
    color: #ffffff;
    border-color: transparent;
}
#leaveBtn:hover,
button.del_btn:hover {
    color: #ffffff;
    opacity: 0.88;
}

/* ----- 16-8. .form_wrap 내부 상단 여백 -----
   my_info.php 의 .join_wrap > .form_wrap — 폼 그룹 상단 여백 */
.join_wrap .form_wrap {
    padding-top: 4px;
}

/* ----- 16-9. .btnWhite.half — 주소검색 버튼 보정 -----
   join.php, join_assoc_com.php, my_info.php, fav_garage_edit.php
   daum 우편번호 팝업을 여는 버튼(.btnWhite.half). 기존 스타일이 없거나
   white/outline 계열이므로 스킨 아웃라인 버튼으로 통일. */
.btnWhite.half {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    color: var(--text-sub);
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin-bottom: 6px;
}
.btnWhite.half:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--primary);
}

/* ----- 16-10. auth·member 반응형 보정 -----
   join_wrap 고정폭 환경 대응. (가입유형 그리드는 §16-4-3 의 auto-fill minmax 가
   폭에 따라 3→2→1열로 자동 흐르므로 767px 1열 강제는 제거 — 모바일권 2열 구간 보존) */
@media (max-width: 767px) {
    /* join_member 여백 축소 */
    .join_member {
        margin-top: 24px;
        margin-bottom: 24px;
    }

    /* 가입유형 박스 — 좁은 폭에선 좌우 패딩 축소(그리드 가용폭 확보 → 2열 구간 유지) */
    .join_member .member_sel_box {
        padding: 20px 14px;
        gap: 12px;
    }

    /* 인라인 width:500px 를 부모가 overflow 없이 담도록 보조 */
    .d-flex .join_wrap,
    .join_wrap[style*="width"] {
        width: 100% !important;
    }

    /* 폼 컨테이너 고정 최소폭 해제 — common.css:15 `.content_wrap .join_wrap{min-width:400px}` 가
       뷰포트<400px(예: Z폴드 접힘 280)에서 폼을 400px로 고정시켜 좌측(라벨)이 잘리던 문제.
       로그인·전 회원가입 폼·my_info·request/edit(.request_car) 공통 해소. */
    .content_wrap .join_wrap {
        min-width: 0;
        padding-left: 18px;  /* common.css 30px → 좁은 폭 가용폭 확보 */
        padding-right: 18px;
    }
}


/* =============================================================
   §17. board · cash 보정 (Phase 3d 추가)
   - 대상 뷰: board/notice/(list/view) + cash/(list/list_assoc)
   - list 3종의 모바일 카드 변환은 §9(m-cards) 가 담당 — 뷰에
     m-cards/data-label/m-head/m-hide 마크업 추가로 활성화됨.
   - 원칙: 뷰의 기존 <style> 블록(cash 출금모달 — deps-audit §3) 불변,
     충돌 항목 없음(레이아웃 전용이라 토큰 스타일과 직교).
   ============================================================= */

/* ----- 17-1. bootstrap 모달 공통 모던화 -----
   cash/list·list_assoc #withdrawModal, member/my_info #regionModal,
   layout/footer #termsModal·#policyModal 등 home 영역 전체 모달에 일괄 적용.
   (mocar-modern.css 는 home 에서만 로드 — site_master 모달에는 영향 없음) */

/* 17-1-1. 모달 컨테이너 — 카드 라운드 + 소프트 그림자 */
.modal .modal-content {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 48px rgba(16,30,54,.18);
    overflow: hidden; /* 헤더/푸터 배경이 라운드를 넘지 않도록 */
}

/* 17-1-2. 모달 헤더 — 서피스-2 + 토큰 보더 */
.modal .modal-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
}
.modal .modal-header .modal-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--text);
}

/* 17-1-3. 모달 푸터 */
.modal .modal-footer {
    background: var(--surface-2);
    border-top: 1px solid var(--line);
    padding: 12px 20px;
}

/* ----- 17-2. 모달 내부 버튼 톤 통일 -----
   §16-2 는 .content_wrap 스코프라 content_wrap "밖" 에 있는 모달
   (#withdrawModal/#regionModal/#termsModal/#policyModal)에는 미적용.
   동일 스타일을 .modal-content 스코프로 재선언. */

/* 17-2-1. primary 계열(.btn-primary/.btn-info) */
.modal-content .btn.btn-primary,
.modal-content .btn.btn-info {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff;
    border-radius: var(--radius);
    font-weight: 700;
    transition: background 0.15s, border-color 0.15s;
}
.modal-content .btn.btn-primary:hover,
.modal-content .btn.btn-info:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #ffffff;
}

/* 17-2-2. 중립 계열(.btn-secondary — 닫기/취소/전체출금) */
.modal-content .btn.btn-secondary {
    background: var(--neutral-soft) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--radius);
    color: var(--text-sub);
    font-weight: 700;
    transition: background 0.15s;
}
.modal-content .btn.btn-secondary:hover {
    background: var(--line) !important;
    color: var(--text);
}

/* ----- 17-3. 캐쉬 요약 영역 (cash/list·list_assoc) -----
   마크업: .mb-md 직계 div 안에 label("내 전체 캐쉬" 등)+span(금액) 나열,
   클래스 없음 → 구조 셀렉터 사용. request/board 의 .mb-md 직계 자식은
   input[hidden]/table 뿐이므로 cash 요약 div 에만 매치된다. */

/* 17-3-1. 요약 래퍼 — 옅은 칩 밴드 */
.panel-body .mb-md > div:first-of-type {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

/* 17-3-2. 라벨(항목명) */
.panel-body .mb-md > div:first-of-type > label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-sub);
    margin: 0;
}

/* 17-3-3. 값(금액) — 주색 강조 + 항목 간 간격 */
.panel-body .mb-md > div:first-of-type > span {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary);
    margin-right: 14px;
}

/* 17-3-4. 출금신청 버튼(#withdraw) — 테이블과의 간격 */
#withdraw {
    margin: 0 0 14px;
}

/* ----- 17-4. 공지 view 테이블 (board/notice/view.php) -----
   .table.table-bordered.table-condensed — bootstrap 테이블을 토큰 톤으로.
   (§9 .list_table 과 별개 마크업이라 별도 보정) */
.panel-body .table.table-bordered {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    border-collapse: separate; /* 라운드 적용을 위해 분리 보더 */
    border-spacing: 0;
    overflow: hidden;
}
.panel-body .table.table-bordered th,
.panel-body .table.table-bordered td {
    border-color: var(--line);
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text);
}
/* 항목명 칸(th) — 서피스-2 배경 */
.panel-body .table.table-bordered th {
    background: var(--surface-2);
    color: var(--text-sub);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

/* ----- 17-5. summernote 본문 타이포 기본값 -----
   공지 view 의 내용 칸(td[colspan="4"] > div) — 콘텐츠 영역이므로
   가독 기본값(줄간격·이미지 맞춤)만 정리, 과한 스타일 강제 금지. */
.panel-body .table.table-bordered td[colspan="4"] > div {
    line-height: 1.7;
    font-size: 15px;
    color: var(--text);
    word-break: break-word;
}
/* 본문 삽입 이미지 — 칸 폭 초과 방지 */
.panel-body .table.table-bordered td[colspan="4"] > div img {
    max-width: 100%;
    height: auto;
}

/* ----- 17-6. 첨부파일 목록(.attached_file) — 공지 view·내정보 공용 -----
   파일 한 줄(p) 톤 정리. 삭제 버튼·미리보기 로직 마크업 불변. */
.attached_file p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
    font-size: 14px;
}
.attached_file p a {
    color: var(--primary);
    text-decoration: none;
}
.attached_file p a:hover {
    text-decoration: underline;
}

/* ----- 17-7. board·cash 반응형 보정 ----- */
@media (max-width: 767px) {
    /* 캐쉬 요약 — 라벨/값 줄바꿈 여유 */
    .panel-body .mb-md > div:first-of-type > span {
        margin-right: 6px;
    }

    /* 공지 view 테이블 — 좁은 화면 패딩 축소 */
    .panel-body .table.table-bordered th,
    .panel-body .table.table-bordered td {
        padding: 10px 12px;
    }
}

/* ----- 17-8. 공지 목록 — 제목 컬럼 왼쪽 정렬 (Ver_1.5) -----
   마크업의 .text-center 를 게시판 관례에 맞게 제목 컬럼만 왼쪽으로
   override(기존이 !important 계열 유틸이라 동일 강도 사용).
   td 는 data-label 로 정확 타겟, th 는 :has() 구조 셀렉터(미지원
   구브라우저는 헤더만 가운데 유지 — 치명적이지 않음). */
.list_table td[data-label="제목"] {
    text-align: left !important;
}
.list_table:has(td[data-label="제목"]) thead th:nth-child(2) {
    text-align: left !important;
}


/* =============================================================
   §18. 요청 폼(request/edit) PC 폭 확대 + 서브그룹 정비 (Ver_1.5)
   - 대상 뷰: request/edit_inc/ 서브폼 5종 공통 래퍼 .join_wrap.request_car
   - 문제: ① common.css:147(.content_wrap .join_wrap{max-width:500px})과
     §16-4-1(.join_member{max-width:760px})에 묶여 PC에서도 폼이 500px로 좁음
     ② 서브그룹(출발지·도착지·지정 입고 공업사)의 label.form-control 이
     좁은 폭에서 "출발지연락처" 등 줄바꿈 ③ 서브그룹 연속 .row 사이 간격이
     없어 readonly 회색 박스들이 붙어 보임
   - 가입·로그인 폼(500px)은 그대로 유지 — .request_car 한정 스코프.
   - :has() 미지원 구브라우저는 기존 폭 유지(점진적 향상 — 깨짐 없음).
   ============================================================= */

/* ----- 18-1. PC 폭 확대 — 920px ----- */
/* 요청 폼(#reqFrm)은 .container_wrap(display:flex)의 flex 아이템이라
   width 미지정 시 콘텐츠 폭(~420px)으로 수축(shrink-to-fit) —
   max-width 만으론 늘어나지 않으므로 전폭 기준을 먼저 확보한다(실측 2026-06-11). */
form#reqFrm {
    width: 100%;
}
/* 부모 래퍼(.join_member, §16-4-1 max-width:760px)도 풀어야 자식 확대가 유효 */
.join_member:has(.join_wrap.request_car) {
    max-width: 920px;
    width: 100%;
    margin-left: auto;  /* 전폭 폼 기준 가운데 정렬 */
    margin-right: auto;
}
/* common.css:147 의 max-width:500px 해제 (width:100% 는 동일 유지) */
.content_wrap .join_wrap.request_car {
    max-width: 920px;
    width: 100%;
}

/* ----- 18-1b. 라벨-필드 간격 단축 — 라벨 고정폭(PC/태블릿) -----
   bootstrap 그리드(col-md-3=25%)는 폼이 넓어질수록 라벨 영역도 비례해
   커져서 라벨 텍스트와 인풋 사이가 멀어짐(가시성 저하) — 라벨을 고정폭으로
   전환하고 필드(flex:1)가 나머지 폭을 채우게 한다. 768px 미만은 §18-5의
   1열 배치라 해당 없음. */
@media (min-width: 768px) {
    /* 메인 라벨(.col-form-label)·들여쓰기용 빈 라벨 — 고정 170px */
    .join_wrap.request_car .row > .col-md-3 {
        flex: 0 0 170px;
        max-width: 170px;
    }
    /* 서브그룹 평라벨(18-3) — 고정 140px (들여쓰기 안쪽이라 더 좁게) */
    .join_wrap.request_car .row > label.form-control.col-md-3 {
        flex: 0 0 140px;
        max-width: 140px;
    }
    /* 필드(인풋·셀렉트·textarea·체크박스 래퍼) — 라벨 제외 나머지 폭을
       유동 분배. 짝 필드(지역 1차/2차, 보험사/번호)는 1:1로 나뉜다 */
    .join_wrap.request_car .row > .form-control:not(label),
    .join_wrap.request_car .row > div.col-md-9 {
        flex: 1 1 0;
        max-width: none;
        min-width: 0; /* flex 아이템 내용 폭으로 인한 overflow 방지 */
    }
}

/* ----- 18-2. 행 정렬 — 라벨·필드 수직 중앙 + 행 간격 통일 ----- */
.join_wrap.request_car .form-group {
    margin-bottom: 16px;
}
.join_wrap.request_car .form-group .row {
    align-items: center;
}
/* textarea(추가요청사항) 행은 멀티라인이라 중앙정렬이 어색 — 라벨을 위로 */
.join_wrap.request_car .form-group .row:has(textarea) {
    align-items: flex-start;
}
/* 서브그룹 연속 행 사이 간격 — readonly 박스 붙음 해소 */
.join_wrap.request_car .form-group .row + .row {
    margin-top: 10px;
}

/* ----- 18-3. 서브그룹 라벨(label.form-control) 평라벨화 -----
   인풋 모양(보더 박스)을 제거하고 §8 .col-form-label 톤으로 통일.
   폭 확대(18-1) + nowrap 으로 라벨 줄바꿈 해소. */
.join_wrap.request_car label.form-control {
    background: transparent;
    border: none !important; /* §7의 1.5px 보더(!important) 해제 */
    box-shadow: none !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-sub);
    padding: 10px 8px 10px 0;
    margin: 0;
    white-space: nowrap;
}

/* ----- 18-4. readonly 입력 — 채움 톤으로 입력 가능 필드와 구분 ----- */
.join_wrap.request_car input.form-control[readonly] {
    background: var(--surface-2);
    color: var(--text-sub);
}

/* ----- 18-4b. 페이지 로더 보정 (Ver_1.5) -----
   common.css:106 의 전역 `svg path, svg rect { fill:#60c0f0d1 }` 가
   로더 SVG 호의 presentation attribute(fill="none")보다 우선해
   호 안쪽이 하늘색 반원으로 채워진 채 회전하던 문제 — 채움 제거.
   (회전 호 색은 stroke 속성이 담당하므로 영향 없음) */
.page-loader svg path,
.page-loader svg rect {
    fill: none;
}

/* ----- 18-5. 모바일(~768px) — 서브그룹 1열 정리 ----- */
@media (max-width: 768px) {
    /* 들여쓰기용 빈 라벨(label.col-md-3)은 모바일에서 공간만 차지 — 숨김 */
    .join_wrap.request_car .row > label.col-md-3:empty {
        display: none;
    }
    /* 서브그룹 라벨 위 · 입력 아래 1열(전폭) — 짝 셀렉트 행(지역/보험사)은
       label.form-control 이 아니므로 기존 2칸 배치 유지 */
    .join_wrap.request_car .row > label.form-control {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 4px 0 2px;
    }
    .join_wrap.request_car .row > label.form-control + .form-control {
        flex: 0 0 100%;
        max-width: 100%;
    }
    /* 단독 입력 col-9(경유지 등) — col-md-9 행들과 달리 모바일에서도
       75%로 남아 어색 → 전폭. 짝 셀렉트 행(col-4/col-5)은 영향 없음 */
    .join_wrap.request_car .row > input.form-control.col-9 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* =============================================================
   §19. 모바일 햄버거 메뉴 → 우측 드로어(off-canvas)
   - 부트스트랩 navbar-expand-lg 는 991.98px 이하에서 .navbar-collapse 를
     접는다(.show 토글). 그 .navbar-collapse 를 "위에서 조금 내려오는 드롭다운"
     대신 우측에서 슬라이드되는 풀높이 패널로 재정의한다.
   - 백드롭(.mnav-backdrop)·닫기버튼(.mnav-close)·아바타(.mnav-ava)는 head_menu.php
     에서 추가된 요소. body.mnav-open 은 collapse show/hide 이벤트로 토글(아래 인라인 JS).
   - #header 는 backdrop-filter 를 가져 fixed 자손의 컨테이닝 블록이 되지만,
     #header 가 뷰포트 좌상단(top:0)·전폭(width:100%)이라 top/right/100vh 기준이 그대로 통한다.
   - PC(≥992px)에는 영향 없음(이 블록 전체가 max-width 미디어쿼리 안).
   ============================================================= */

/* 백드롭은 기본적으로 숨김 — 모바일 + 메뉴 열림일 때만 노출 */
.mnav-backdrop { display: none; }
/* 닫기버튼·아바타는 PC GNB 에선 불필요 — 기본 숨김(모바일 드로어에서만 표시) */
.mnav-close { display: none; }
.mnav-ava { display: none; }

@media (max-width: 991.98px) {

    /* ----- 19-1. 햄버거(toggler) — 라운드 박스 톤 통일 ----- */
    #header .navbar-toggler {
        border: 1px solid var(--line);
        border-radius: 12px;
        padding: 8px 10px;
        background: var(--surface);
        outline: none;
    }
    #header .navbar-toggler:focus { box-shadow: 0 0 0 3px var(--primary-soft); }

    /* ----- 19-2. 드로어 패널: .navbar-collapse 를 우측 풀높이 패널로 -----
       display:flex 강제 → 부트스트랩 .collapse{display:none} 무력화(항상 레이아웃에
       두되 transform 으로 화면 밖에 숨김). 열림(.show/.collapsing) 시 translateX(0). */
    #header .navbar-collapse {
        position: fixed;
        top: 0;
        right: 0;
        /* !important — 부트스트랩 collapse 가 .collapsing 동안 넣는 인라인 height(콘텐츠 높이)를
           눌러 처음부터 전체 높이 고정. 높이는 애니메이션하지 않고 슬라이드(transform)만 동작 */
        height: 100vh !important;
        height: 100dvh !important; /* 모바일 브라우저 주소창 대응(미지원 브라우저는 위 100vh) */
        width: 84%;
        max-width: 340px;
        z-index: 1050;
        background: var(--surface);
        box-shadow: -14px 0 38px rgba(16, 30, 54, .18);
        transform: translateX(100%);
        visibility: hidden;
        /* 닫힘 전환 — 슬라이드아웃(.22s)이 끝난 뒤 visibility 를 hidden 으로(닫을 때도 화면 밖으로
           부드럽게 미끄러져 나가도록). transform 구동은 아래 body.mnav-open 규칙 참고 */
        transition: transform .22s cubic-bezier(.22, .61, .36, 1), visibility 0s linear .22s;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 14px 16px 22px;
        display: flex !important; /* .collapse(display:none) override */
        flex-direction: column;
        align-items: stretch;
    }
    /* 열림 — body.mnav-open(열기/닫기 시작 시 show/hide.bs.collapse 이벤트로 즉시 토글) 또는
       .show(부트스트랩 완료 상태). transform 을 방향 구분 안 되는 .collapsing 대신 body.mnav-open
       으로 구동 → 열 때·닫을 때 모두 같은 속도로 즉시 슬라이드(닫힘 지연·끊김 해소).
       높이 트랜지션은 base !important 전체 고정으로 애초에 없음 — 슬라이드(transform)만 동작. */
    #header .navbar-collapse.show,
    body.mnav-open #header .navbar-collapse {
        transform: translateX(0);
        visibility: visible;
        transition: transform .22s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
    }

    /* ----- 19-3. 백드롭(딤) — 메뉴 열릴 때 본문 위 덮기 ----- */
    .mnav-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        z-index: 1040; /* 드로어(1050)보다 아래, 본문보다 위 */
        background: rgba(13, 20, 33, .46);
        opacity: 0;
        visibility: hidden;
        transition: opacity .26s;
    }
    body.mnav-open .mnav-backdrop {
        opacity: 1;
        visibility: visible;
    }
    /* 메뉴 열림 동안 본문 스크롤 잠금 */
    body.mnav-open {
        overflow: hidden;
    }
    /* 닫힌 드로어는 translateX(100%)로 화면 오른쪽 밖에 있어 문서 가로 스크롤(scrollWidth)을
       그만큼 늘린다 → 모든 페이지에 빈 가로 스크롤 발생. 오프캔버스 표준대로 본문 가로 넘침을 클립.
       (overflow-x:clip 은 세로축·position:sticky 헤더에 영향 없음. 미지원 구형 웹뷰는 무시→기존 동작) */
    body {
        overflow-x: clip;
    }

    /* ----- 19-4. 내부 배치: 닫기(0) → 사용자카드(1) → 메뉴(2) ----- */
    #header .navbar-collapse .navbar-text { order: 1; }
    #header .navbar-collapse .navbar-nav { order: 2; }

    /* 닫기(X) 버튼 — 우상단 */
    #header .mnav-close {
        display: block;
        order: 0;
        align-self: flex-end;
        width: 38px;
        height: 38px;
        border: none;
        background: none;
        color: var(--text-sub);
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        margin-bottom: 2px;
    }

    /* ----- 19-5. 사용자 카드(navbar-text) ----- */
    #header .navbar-collapse .navbar-text {
        width: 100%;
        float: none;
        padding: 0 2px 16px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--line);
    }
    /* nav-link: 1행=아바타+인사말(전폭) / 2행=버튼 2개. flex-wrap 으로 버튼을 다음 줄로 */
    #header .navbar-collapse .navbar-text .nav-link {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 8px;
        padding: 0;
    }
    /* 아바타 — 이름 첫 글자 원형 칩 */
    #header .mnav-ava {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex: none;
        border-radius: 50%;
        background: var(--primary-soft);
        color: var(--primary);
        font-weight: 800;
        font-size: 18px;
    }
    /* 인사말 — 아바타 옆 남은 폭 전부 차지(min-width 로 1행을 꽉 채워 버튼을 2행으로 밀어냄) */
    #header .mnav-greet {
        flex: 1 1 auto;
        min-width: calc(100% - 56px); /* 아바타(44)+gap(8) 제외분 → 1행은 아바타+인사말로 가득 */
        font-size: 15px;
        color: var(--text-sub);
        font-weight: 600;
        line-height: 1.4;
    }
    #header .mnav-greet .login_name {
        display: block;
        color: var(--text);
        font-weight: 800;
        font-size: 17px;
    }
    /* 마이페이지·로그아웃(또는 회원가입·로그인) — 2행에서 좌우 균등 분할 */
    #header .navbar-collapse .navbar-text .btn-head {
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
        height: 46px;
    }

    /* ----- 19-6. 메뉴 리스트(navbar-nav) — 전폭 세로 + 구분선 + 좌측정렬 ----- */
    #header .navbar-collapse .navbar-nav {
        width: 100%;
        flex-direction: column;
        margin: 0;
    }
    /* common.css:204 .navbar-nav .nav-item{text-align:right;padding-right:30px} override */
    #header .navbar-collapse .navbar-nav .nav-item {
        width: 100%;
        text-align: left;
        padding-right: 0;
    }
    #header .navbar-collapse .navbar-nav .nav-link {
        padding: 15px 8px;
        font-size: 16px;
        border-radius: 10px;
        text-align: left;
    }
    /* 항목 사이 구분선(첫 항목 제외) */
    #header .navbar-collapse .navbar-nav .nav-item + .nav-item .nav-link {
        border-top: 1px solid var(--line);
        border-radius: 0;
    }
}


/* =============================================================
   §20. 좁은 폭(≤767px) 전역 잘림 보정 — Z폴드 접힘(280)까지 대응
   - 반응형 전수조사(_pw/audit_run.js)로 검출된 가로 오버플로우 일괄 해소.
   - 푸터(pl-5/pr-5·com_tel min-width:270!important·float:right) 세로 스택,
     목록 검색바(select.ml-5=48px 여백) 정리.
   2026-06-18 Ver_1.7 [작성자:Claude]
   ============================================================= */
@media (max-width: 767px) {

    /* ----- 20-1. 사이트 푸터(#ft) — 좁은 폭 세로 스택 ----- */
    /* d-flex justify-content-between + pl-5/pr-5(3rem) → 세로 스택 + 패딩 축소 */
    #ft .footer_wrap {
        flex-direction: column;
        padding-left: 18px !important;  /* pl-5(3rem)·pr-5 override */
        padding-right: 18px !important;
        gap: 16px;
    }
    /* 고객센터 박스 — min-wpx-270(!important)·float:right 해제 → 전폭 */
    #ft .com_tel.min-wpx-270 {
        min-width: 0 !important;
        width: 100%;
        float: none !important;
        box-sizing: border-box;
    }

    /* ----- 20-2. 목록 검색바(#searchFrm) — 좁은 폭 넘침 해소 ----- */
    /* select 의 ml-5(margin-left:3rem!important=48px)가 280px 에서 버튼을 밀어 넘침 →
       여백 제거 + 줄바꿈 허용(버튼이 다음 줄로 흐르게) */
    #searchFrm .form-group.d-flex {
        flex-wrap: wrap;
        gap: 6px;
    }
    #searchFrm .form-group.d-flex .ml-5 {
        margin-left: 0 !important;
    }
}

/* =============================================================
   §21. 소켓 알림 토스트(iziToast.mocar-noti-toast) 스타일
   - X(우상단 close) 제거 대신 '닫기' 버튼 사용(JS: close:false) → 중복 닫기 UI 정리
   - '이동'·'닫기' 버튼을 메시지 아래 줄로 내려 토스트 우측 정렬
     (iziToast 기본은 .iziToast-texts·.iziToast-buttons 가 둘 다 float:left 라 좌측에 붙음)
   2026-06-19 [작성자:Claude]
   ============================================================= */
.iziToast.mocar-noti-toast .iziToast-buttons {
    clear: both;        /* 메시지(.iziToast-texts, float:left) 아래 줄로 내림 */
    float: none;
    display: block;
    margin: 6px 0 2px;
    text-align: right;  /* 버튼(inline-block)들을 토스트 우측으로 정렬 */
}

/* =============================================================
   §22. 부트스트랩 모달 상하좌우 중앙정렬
   - 부트스트랩 4.x 모바일(<576px)은 .modal-dialog{margin:.5rem}(좌우 auto 아님)+수직 상단이라,
     폭 줄인 모달(요청내역 mw-100 w-75 / 지정업체 w-90)이 좌측·상단으로 쏠림.
   - 전역으로 수평(margin auto)+수직(flex center, modal-dialog-centered 방식) 중앙정렬.
     긴 내용은 modal-content 자체 max-height/overflow 로 스크롤되므로 잘림 없음.
   2026-06-29 [작성자:Claude]
   ============================================================= */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);   /* 모바일(상하 .5rem*2) 기준 — 화면 높이만큼 잡아 수직 중앙 */
}
/* 데스크톱(부트스트랩 상하 1.75rem*2)에선 그만큼 빼 스크롤 여지 보정 */
@media (min-width: 576px) {
    .modal-dialog { min-height: calc(100% - 3.5rem); }
}
/* flex 자식이 된 modal-content 가 폭을 잃지 않도록 보장 */
.modal-dialog > .modal-content {
    width: 100%;
}
/* 폭 줄인 모달(요청내역 w-75 / 지정업체 w-90)만 수평 중앙 보정 —
   기본(width:auto) 모달은 부트스트랩 좌우 여백(.5rem)을 그대로 유지 */
.modal-dialog.w-75,
.modal-dialog.w-90 {
    margin-left: auto;
    margin-right: auto;
}