/* ============================================================
 * responsive.css — /client/Receipt 페이지 공통 모바일 반응형
 *   대상: Receipt_Input_A/B, all_list, all_view, Receipt_Edit_A/B
 *   (뷰포트 meta 는 /includes/header.php 에서 제공)
 * ============================================================ */

/* ----- 태블릿 이하 ----- */
@media (max-width: 991px) {
  .page-title h1 { font-size: 22px; }
  table.Rec_B th { width: 38%; }
  table.view-table th { width: 22%; }
}

/* ----- 모바일 (≤768px) ----- */
@media (max-width: 768px) {

  /* 페이지 타이틀 */
  .page-title { padding: 22px 0 !important; }
  .page-title h1 { font-size: 19px !important; }
  .page-title .sub { font-size: 12px !important; }
  .receipt-wrap, .view-wrap, .list-wrap { padding: 22px 0 40px !important; }

  /* 안내 박스 */
  .rec-intro { font-size: 13px; padding: 12px 14px; }

  /* ── 신청서/수정 폼 (Rec_B): 라벨/입력 세로 스택 ── */
  table.Rec_B, table.Rec_B tbody, table.Rec_B tr,
  table.Rec_B th, table.Rec_B td { display: block; width: 100% !important; box-sizing: border-box; }
  table.Rec_B tr { border: 1px solid #dfe6ee; border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
  table.Rec_B th { border: 0 !important; background: #eef4fb !important; padding: 10px 12px !important; font-size: 13px; }
  table.Rec_B td { border: 0 !important; padding: 10px 12px 14px !important; }
  table.Rec_B input[type=text], table.Rec_B input.full,
  table.Rec_B textarea { width: 100% !important; box-sizing: border-box; }
  table.Rec_B select { max-width: 100%; }
  .rec-radio { display: inline-block; margin: 4px 14px 4px 0; }
  .rec-label { display: block; margin: 4px 0 0 0; }

  /* 우편번호 줄: 버튼 줄바꿈 허용 */
  table.Rec_B #ZIP_CODE { width: 46% !important; display: inline-block; }

  /* ── 상세조회 (view-table): 세로 스택 ── */
  table.view-table, table.view-table tbody, table.view-table tr,
  table.view-table th, table.view-table td { display: block; width: 100% !important; box-sizing: border-box; }
  table.view-table tr { border: 1px solid #dfe6ee; border-radius: 6px; margin-bottom: 8px; overflow: hidden; }
  table.view-table th { border: 0 !important; background: #eef4fb !important; padding: 9px 12px !important; }
  table.view-table td { border: 0 !important; padding: 9px 12px 12px !important; }
  .section-header { font-size: 14px; }

  /* ── 목록 (all_list): 가로 스크롤 ── */
  table.list { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; font-size: 12px; }
  table.list th, table.list td { padding: 8px 7px; }
  .info-line { flex-direction: column; gap: 2px; }
  .info-line .hint { font-size: 12px; }

  /* 검색바: 세로 정렬 + 전체폭 */
  .srch-bar { flex-direction: column; align-items: stretch; }
  .srch-bar select, .srch-bar input[type=text], .srch-bar button { width: 100% !important; max-width: none; }

  /* 버튼: 전체폭 블록 */
  .btn-bar .btn-save, .btn-bar .btn-cancel,
  .btn-row .btn-del, .btn-row .btn-edit, .btn-row .btn-photo, .btn-row .btn-list {
    display: block; width: 100%; margin: 6px 0 !important; box-sizing: border-box; text-align: center;
  }
  .btn-receipt { width: 100%; box-sizing: border-box; }

  /* 준비서류 안내(사이드) — 본문 아래로 자연스럽게 흐름(Bootstrap col 이 이미 스택) */
  .rec-tip { font-size: 13px; }

  /* ── 비밀번호 인증 모달 ── */
  .pw-modal { width: 94% !important; margin-top: 70px !important; }
  .pw-modal .frow { flex-direction: column; align-items: stretch; gap: 4px; }
  .pw-modal .frow label { width: auto !important; text-align: left !important; }
  .pw-modal .frow input { width: 100% !important; }

  /* 기존 사진 썸네일 살짝 축소 */
  .exist-photos img { width: 80px; height: 60px; }
}

/* ----- 초소형 (≤480px) ----- */
@media (max-width: 480px) {
  .page-title h1 { font-size: 17px !important; }
  table.Rec_B th, table.view-table th { font-size: 12.5px; }
  table.Rec_B td, table.view-table td { font-size: 13px; }
}