/* ==========================================================
   rc_mobile_card.css
   - 차량 비교 테이블 모바일 레이아웃 3종 (simple / stack / compact)
   - 업체명 표시 / 숨김 모드 (rc-company-show / rc-company-hide)
   - 적용 범위: .rent_list_wrap 래퍼 + booking_car .modal_wrap 래퍼
   - 데스크톱(>576px) 에는 영향 없음 — 모바일 미디어쿼리 안에서만 활성
   ========================================================== */

/* ----------------------------------------------------------
   업체명 숨김 모드 — 데이터는 DOM 그대로, 시각만 숨김
   (booking_payment.php 가 companyName 으로 외부 API 자격증명 호출하므로
    데이터는 절대 제거하면 안 됨)
   ---------------------------------------------------------- */

/* 카드 헤더의 차량명 옆 작은 업체명 라벨 */
.rc-company-hide .company-sub { display: none !important; }

/* 비교 테이블의 첫 번째 컬럼 (대여업체명 th + td) — 모든 화면에서 숨김 */
.rc-company-hide .table_title th:first-child,
.rc-company-hide .table tbody td:first-child { display: none; }

/* ⭐ 핵심: 업체명 컬럼이 빠진 만큼 나머지 컬럼이 너비를 자동 재분배해야 함.
   colgroup 의 고정 width(16%/12%/12px/* /14%/10%) 가 살아있으면 빈 16% 가 그대로 남고
   나머지 컬럼이 좁아져 "보험금액"·"완전자차" 글자가 세로로 짤린다.
   → colgroup 을 통째로 비활성화 + table-layout:auto 로 콘텐츠 기반 자동 분배 */
.rc-company-hide .table colgroup { display: none; }
.rc-company-hide .table table { table-layout: auto; }
.rc-company-hide .table th,
.rc-company-hide .table td { word-break: keep-all; white-space: normal; }

/* booking_car.php 의 "렌트카 업체 :" li (PHP 가 .rc-company-row 클래스 부여) */
.rc-company-hide .rc-company-row { display: none; }


/* ==========================================================
   모바일 한정 레이아웃 (576px 이하)
   ========================================================== */
@media screen and (max-width: 576px) {

  /* 공통: 카드 헤더의 업체명을 데스크톱보다 작게 (위계 회복) */
  .rent_list_wrap .car_name .company-sub {
    font-size: 12px;
    font-weight: 600;
  }
  .rent_list_wrap .car_name .car_name1 {
    font-size: 18px;
  }
  .rent_list_wrap .car_name {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* ----------------------------------------------------------
     A안: simple — 테이블 유지 (모든 컬럼 표시).
       기존 0.6em 글자 + 고정 colgroup 으로 깨지는 문제를 해결하기 위해
       1) colgroup 무력화 → table-layout:auto 로 한국어 콘텐츠 폭에 맞춰 재분배
       2) 폰트 0.7em + word-break:keep-all 로 단어 보존
       3) 좌우 패딩 축소
     ---------------------------------------------------------- */
  .rc-mobile-simple .table { padding: 0; }
  .rc-mobile-simple .table colgroup { display: none; }
  .rc-mobile-simple .table table { table-layout: auto; width: 100%; }
  .rc-mobile-simple .table th,
  .rc-mobile-simple .table td {
    font-size: 0.7em;
    padding: 10px 2px;
    word-break: keep-all;
    white-space: normal;
    line-height: 1.3;
  }
  /* 가격(5번째) 강조 */
  .rc-mobile-simple .table tbody td:nth-child(5) {
    color: var(--rc-price-color, #FF6B00);
  }
  .rc-mobile-simple .table tbody td:nth-child(5) a {
    font-weight: 800;
    font-size: 1.15em;
    color: inherit;
  }
  /* 예약 버튼 살짝 키움 */
  .rc-mobile-simple .table .booking a {
    font-size: 1em;
    font-weight: 700;
  }

  /* ----------------------------------------------------------
     B안: stack — 각 행을 세로 카드형 그리드로 변환 (권장 기본)
     원본 JS 는 <thead> 없이 <tr class="table_title"> 만 사용 → 클래스로 직접 숨김
     ---------------------------------------------------------- */
  .rc-mobile-stack .table { min-width: 0 !important; padding: 0; }
  .rc-mobile-stack .table table { display: block; }
  .rc-mobile-stack .table colgroup,
  .rc-mobile-stack .table tr.table_title { display: none; }
  .rc-mobile-stack .table tbody { display: block; }

  /* 본문 행 → 그리드 카드 (table_title 제외) */
  .rc-mobile-stack .table tbody tr:not(.table_title) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "company company company"
      "age year care"
      "price price book";
    gap: 6px 8px;
    padding: 12px 14px;
    border-bottom: 1px solid #eee;
    background: #fff;
  }
  .rc-mobile-stack .table tbody tr:hover { background: #fafafa; }

  /* 더보기 토글 행 — colspan td 만 가진 행은 그리드 무시 */
  .rc-mobile-stack .table tbody tr td[colspan] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 8px 0;
  }
  .rc-mobile-stack .table tbody tr td[colspan]::before { content: ""; display: none; }

  /* 각 셀 — 라벨(::before) + 값 */
  .rc-mobile-stack .table tbody td {
    display: block;
    text-align: left;
    padding: 0;
    border: none;
    font-size: 13px;
  }
  .rc-mobile-stack .table tbody td a {
    color: inherit;
    text-decoration: none;
  }
  .rc-mobile-stack .table tbody td::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    color: #999;
    font-weight: 500;
    margin-bottom: 2px;
  }
  /* 1번째 = 업체명 (data-label fallback) */
  .rc-mobile-stack .table tbody td:nth-child(1) { grid-area: company; font-size: 12px; color: #666; }
  .rc-mobile-stack .table tbody td:nth-child(1)::before { content: "업체"; }
  .rc-mobile-stack .table tbody td:nth-child(2) { grid-area: age; }
  .rc-mobile-stack .table tbody td:nth-child(2)::before { content: "나이"; }
  .rc-mobile-stack .table tbody td:nth-child(3) { grid-area: year; }
  .rc-mobile-stack .table tbody td:nth-child(3)::before { content: "연식"; }
  .rc-mobile-stack .table tbody td:nth-child(4) { grid-area: care; }
  .rc-mobile-stack .table tbody td:nth-child(4)::before { content: "보험"; }

  /* 가격 — 크게 강조 */
  .rc-mobile-stack .table tbody td:nth-child(5) { grid-area: price; align-self: center; }
  .rc-mobile-stack .table tbody td:nth-child(5)::before { content: "총요금"; }
  .rc-mobile-stack .table tbody td:nth-child(5) a {
    font-size: 18px;
    font-weight: 800;
    color: var(--rc-price-color, #FF6B00);
  }

  /* 예약 버튼 — 우측 칩, 카드 내 우측 정렬 */
  .rc-mobile-stack .table tbody td.booking { grid-area: book; align-self: center; }
  .rc-mobile-stack .table tbody td.booking::before { content: ""; display: none; }
  .rc-mobile-stack .table tbody td.booking a {
    display: inline-block;
    padding: 8px 16px;
    background: var(--rc-booking-btn-bg, #FF6B00);
    color: #fff !important;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  .rc-mobile-stack .table tbody td.booking .booking_wrap { color: #fff; }

  /* 업체명 숨김 + stack 모드: company 영역을 그리드에서 제거하여 빈 공간 발생 방지 */
  .rc-company-hide.rc-mobile-stack .table tbody tr,
  .rc-mobile-stack.rc-company-hide .table tbody tr {
    grid-template-areas:
      "age year care"
      "price price book";
  }

  /* ----------------------------------------------------------
     C안: compact — 한 줄에 업체명+가격+예약 칩
     ---------------------------------------------------------- */
  .rc-mobile-compact .table { min-width: 0 !important; padding: 0; }
  .rc-mobile-compact .table table { display: block; }
  .rc-mobile-compact .table colgroup,
  .rc-mobile-compact .table tr.table_title { display: none; }
  .rc-mobile-compact .table tbody { display: block; }
  .rc-mobile-compact .table tbody tr:not(.table_title) {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
    gap: 6px 8px;
  }
  .rc-mobile-compact .table tbody tr td[colspan] {
    flex: 1 1 100%;
    text-align: center;
    padding: 8px 0;
  }
  .rc-mobile-compact .table tbody td {
    display: inline-block;
    padding: 0;
    border: none;
    text-align: left;
  }
  .rc-mobile-compact .table tbody td a { color: inherit; text-decoration: none; }
  /* 업체명 — 작은 라벨, 좌측 */
  .rc-mobile-compact .table tbody td:nth-child(1) {
    flex: 1 1 100%;
    font-size: 11px;
    color: #888;
    font-weight: 600;
  }
  /* 나이/연식/보험 — 중간 작은 텍스트 */
  .rc-mobile-compact .table tbody td:nth-child(2),
  .rc-mobile-compact .table tbody td:nth-child(3),
  .rc-mobile-compact .table tbody td:nth-child(4) {
    font-size: 11px;
    color: #aaa;
  }
  /* 가격 — 우측 강조 */
  .rc-mobile-compact .table tbody td:nth-child(5) {
    margin-left: auto;
    font-size: 16px;
    font-weight: 800;
    color: var(--rc-price-color, #FF6B00);
  }
  .rc-mobile-compact .table tbody td:nth-child(5) a { color: inherit; }
  /* 예약 — 칩 형태 */
  .rc-mobile-compact .table tbody td.booking a {
    display: inline-block;
    padding: 6px 14px;
    background: var(--rc-booking-btn-bg, #FF6B00);
    color: #fff !important;
    border-radius: 18px;
    font-size: 12px;
    font-weight: 700;
  }
  .rc-mobile-compact .table tbody td.booking .booking_wrap { color: #fff; }

  /* ----------------------------------------------------------
     공통: simple 모드 외에는 기존 0.6em 규칙(media.css) 무력화
     (media.css 에 .rc-mobile-simple 한정 분기를 두므로 여기는 보강)
     ---------------------------------------------------------- */
  .rc-mobile-stack .table th,
  .rc-mobile-stack .table td,
  .rc-mobile-compact .table th,
  .rc-mobile-compact .table td { font-size: inherit; }
}