/* ============================================================
   mobile.css — 모바일 최적화 공통 레이어
   ------------------------------------------------------------
   ▶ 반드시 styles.css 다음에 불러와야 합니다.
      <link rel="stylesheet" href="styles.css">
      <link rel="stylesheet" href="mobile.css">

   ▶ styles.css 는 관리자 페이지까지 함께 쓰는 공용 파일이라
      건드리지 않고, 고객 화면의 모바일 보정만 이 파일에 모읍니다.
   ============================================================ */

/* ─── 하단 고정 메뉴바 높이 자동 판별 ───────────────────────
   페이지에 .mobile-nav 가 있으면 74px, 없으면 0px.
   :has() 덕분에 페이지마다 값을 따로 지정할 필요가 없습니다.
   (견적 페이지에는 메뉴바가 없어 예전에는 74px 이 빈칸으로 남았음)
──────────────────────────────────────────────────────────── */
:root{
  --bottom-nav: 0px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
body:has(.mobile-nav){
  --bottom-nav: 74px;
}

/* ─── 시·분 선택 가로 배치 ──────────────────────────────────
   styles.css 에 .time-select-row 규칙이 아예 없어서
   시/분이 세로로 쌓여 있었습니다. PC·모바일 공통 적용.
──────────────────────────────────────────────────────────── */
.time-select-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.time-select-row select{
  margin-top: 0;
}

/* ─── 날짜 입력칸 보조 안내 ────────────────────────────────── */
.field-hint{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 400;
  color: #8a95a0;
}

@media (max-width: 760px){

  /* ── 1) 페이지 바닥 죽은 여백 제거 ───────────────────────
     기존: body 74px + 페이지 90px = 최대 164px 이 빈칸으로 남음
     변경: 메뉴바가 실제로 있는 페이지만 그 높이 + 홈바 영역 확보
  ────────────────────────────────────────────────────────── */
  body{
    padding-bottom: calc(var(--bottom-nav) + var(--safe-bottom));
  }
  .quote-page{ padding: 18px 0 28px; }
  .group-page{ padding: 20px 0 28px; }

  /* ── 2) 하단 액션바 (다음 단계 / 이전) ──────────────────── */
  .quote-page .actions{
    position: sticky;
    bottom: calc(var(--bottom-nav) + var(--safe-bottom));
    z-index: 5;
    margin: 20px -16px 0;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #e5e9ef;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 -8px 18px rgba(24,33,47,.07);
  }

  /* ── 3) 첫 화면에 입력칸이 보이도록 상단 정보 축약 ────────
     제목·설명이 화면 40% 를 차지해 입력칸이 안 보이던 문제
  ────────────────────────────────────────────────────────── */
  .quote-head{ margin-bottom: 16px; }
  .quote-head .eyebrow{ font-size: 13px; }
  .quote-head h1{ font-size: 27px; margin: 6px 0 8px; }
  .quote-head p{ font-size: 15px; }

  .group-head{ margin-bottom: 18px; }
  .group-head h1{ font-size: 28px; margin: 6px 0 10px; }
  .group-head p{ font-size: 16px; }

  /* ── 4) 카드 내부 밀도 조정 ─────────────────────────────── */
  .quote-card{ padding: 16px; }
  .progress{ margin: 8px 0 16px; }
  .quote-step h2, .request-step h2{ font-size: 21px; }
  .step-help{ font-size: 15px; margin: 6px 0 2px; }

  .quote-step label,
  .request-step label{ font-size: 16px; margin: 14px 0 0; }

  /* 입력칸 글자 16px: 이보다 작으면 모바일에서 화면이 자동 확대됨 */
  .quote-step input, .quote-step select, .quote-step textarea,
  .request-step input, .request-step select, .request-step textarea{
    padding: 14px;
    font-size: 16px;
    border-radius: 12px;
  }
  .big-choice label{ padding: 14px; }

  /* ── 5) 모집버스 카드 여백 정리 ─────────────────────────── */
  .route-card{ padding: 18px; gap: 14px; }
  .notice{ padding: 18px; }
}