/* ═══ 모바일 공통 기준 (사용자·스키퍼·교육 화면 전용, 640px 이하) ═══════════════════════════════
   2026-10-23 시안 확정안. 화면별 인라인 <style>의 모바일 규칙 대신 여기 한 곳에서 관리한다.
   관리자 화면(.admin-main)은 이 파일을 불러오지 않는다.
   ① 라벨-값: .desc-table 2열 격자 / .kv-rows 행형   ② 버튼 높이·폭 통일   ③ 배지 줄바꿈 금지
   ④ 승선자 카드·입력칸 세로   ⑤ 점검 체크리스트 */

@media (max-width: 640px) {

  /* ① 라벨-값 격자 — 4열 표(라벨 값 라벨 값)를 라벨 위·값 아래 2열로 */
  .desc-table, .desc-table tbody { display: block; width: 100%; }
  .desc-table tr {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
    grid-auto-flow: column; gap: 2px 12px; padding: 8px 0;
  }
  .desc-table tr:has(> :nth-child(2):last-child) {
    grid-template-columns: 1fr; grid-template-rows: auto; grid-auto-flow: row;
  }
  .desc-table th, .desc-table td { display: block; padding: 0; border: 0; width: auto; text-align: left; }
  .desc-table th { font-size: 12px; font-weight: 500; color: var(--gray-3); white-space: nowrap; }
  .desc-table td { font-size: 15px; font-weight: 600; color: var(--navy); word-break: keep-all; overflow-wrap: anywhere; }

  /* ① 라벨-값 행형 — 항목이 많은 목록(라벨 왼쪽, 값 오른쪽) */
  .kv-rows .kv-row {
    display: flex; justify-content: space-between; gap: 12px; padding: 9px 0;
    border-bottom: 1px solid #edf1f6; font-size: 14px;
  }
  .kv-rows .kv-row:last-child { border-bottom: 0; }
  .kv-rows .kv-row > span { color: var(--gray-3); flex-shrink: 0; }
  .kv-rows .kv-row > b { font-weight: 600; color: var(--navy); text-align: right; }

  /* ② 버튼 — 높이 42px(작은 버튼 38px), 모서리 10px, 그림자 없음 */
  .app-main .btn-primary, .app-main .btn-ghost, .app-main .btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 42px; padding: 0 16px; border-radius: 10px;
    font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap;
    box-shadow: none; text-decoration: none;
  }
  .app-main .btn-sm { min-height: 38px; padding: 0 14px; font-size: 13px; }
  /* 같은 줄의 버튼은 균등 분할 */
  .app-main .action-bar, .app-main .btn-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px; justify-content: stretch; align-items: stretch;
  }
  .app-main .action-bar > *, .app-main .btn-row > * { width: 100%; }
  .app-main .btn-row.is-full { grid-template-columns: 1fr; }
  /* 주 버튼은 한 줄 전체 폭, 나머지는 아래에서 균등 분할 */
  .app-main .btn-stack > .btn-primary { grid-column: 1 / -1; order: -1; }
  /* 패널 머리글 안의 작은 버튼 묶음은 분할하지 않는다 */
  .app-main .panel-head .action-bar { display: flex; width: auto; flex-wrap: nowrap; }
  .app-main .panel-head .action-bar > * { width: auto; }

  /* ③ 배지·숫자 — 줄바꿈 금지 */
  .app-main .badge, .app-main .sign-chip, .app-main .status-badge, .app-main .pill { white-space: nowrap; flex-shrink: 0; }
  .app-main .panel-head { gap: 10px; }

  /* ④ 승선자 카드 (스키퍼 승선자 명부) — 이름+상태 / 연락처·생년월일 한 줄 / 같은 폭 버튼 줄 */
  .app-main .pax-header, .app-main .pax-edit-header { display: none !important; }
  .app-main .pax-row:has(> .pax-info) {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    padding: 12px; margin-bottom: 10px; border: 1px solid var(--gray-2); border-radius: 12px; background: var(--gray-1);
  }
  .pax-row > .pax-info, .pax-row > .pax-actions { display: contents; }
  .pax-row > .pax-info .pax-num { display: none; }
  .pax-row > .pax-info .pax-name { grid-column: 1 / 3; grid-row: 1; align-self: center; font-size: 15px; font-weight: 700; color: var(--navy); }
  .pax-row > .pax-info .pax-sign-cell { grid-column: 3 / 5; grid-row: 1; justify-self: end; margin: 0; flex-wrap: wrap; justify-content: flex-end; }
  .pax-row > .pax-info .pax-phone { grid-column: 1 / 3; grid-row: 2; font-size: 13px; color: var(--gray-3); white-space: nowrap; margin-bottom: 4px; }
  .pax-row > .pax-info .pax-birth { grid-column: 3 / 5; grid-row: 2; font-size: 13px; color: var(--gray-3); white-space: nowrap; text-align: right; margin-bottom: 4px; }
  .pax-row > .pax-info .sig-btn, .pax-row .pax-actions > button {
    grid-column: auto; grid-row: auto; align-self: stretch; width: 100%; min-height: 40px; padding: 0 4px;
    border-radius: 10px; font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .pax-row > .pax-info .sig-btn { background: var(--red); border-color: var(--red); color: #fff; }
  .pax-row > .pax-info .sig-btn.has-sig { background: #fff; border-color: var(--gray-2); color: var(--navy); }
  .pax-row .pax-actions > .pax-fill { grid-column: 1 / -1; justify-content: stretch !important; }

  /* ④ 입력형 승선자 카드 (예약 신청·예약상세 편집) — 라벨 위, 입력칸은 한 줄에 하나 */
  .app-main .pax-row:not(:has(> .pax-info)), .app-main .pax-edit-row {
    display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto !important;
    grid-auto-rows: auto; gap: 8px !important; align-items: center;
    padding: 12px !important; margin-bottom: 10px !important;
    border: 1px solid var(--gray-2) !important; border-radius: 12px !important; background: var(--gray-1) !important;
  }
  .app-main .pax-row:not(:has(> .pax-info)) .pax-num, .app-main .pax-edit-row .pax-num {
    display: block; grid-column: 1 !important; grid-row: 1 !important; text-align: left; font-size: 14px; font-weight: 700; color: var(--navy);
  }
  .app-main .pax-row:not(:has(> .pax-info)) .pax-num::before, .app-main .pax-edit-row .pax-num::before { content: '승선자 '; }
  .app-main .pax-row .pax-delete-btn, .app-main .pax-edit-row .pax-delete-btn {
    grid-column: 2 !important; grid-row: 1 !important; min-height: 34px; padding: 0 12px; font-size: 13px;
  }
  .app-main .pax-row:not(:has(> .pax-info)) > :not(.pax-num):not(.pax-delete-btn),
  .app-main .pax-edit-row > :not(.pax-num):not(.pax-delete-btn) { grid-column: 1 / -1 !important; grid-row: auto !important; width: 100%; }
  .app-main .pax-row:not(:has(> .pax-info)) .input, .app-main .pax-edit-row .input,
  .app-main .pax-row .pax-type-select, .app-main .pax-edit-row .pax-type-select, .app-main .pax-edit-row .sig-btn { height: 44px; font-size: 15px; }
  .app-main .pax-edit-row .sig-btn { min-height: 44px; }
  .app-main .pax-edit-row > span:empty { display: none; }

  /* ① 이용 현황·가입 결과처럼 <div><strong>라벨</strong><span>값</span></div> 로 된 목록 → 행형 */
  .meta-list > div:has(> strong:first-child + span) {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid #edf1f6; font-size: 14px;
  }
  .meta-list > div:has(> strong:first-child + span):last-child { border-bottom: 0; }
  .meta-list > div > strong:first-child { font-weight: 500; color: var(--gray-3); flex-shrink: 0; margin: 0; }
  .meta-list > div > strong:first-child + span { font-weight: 600; color: var(--navy); text-align: right; }

  /* ③ 홈 상단 숫자 표시줄 — 가로 스크롤 대신 4칸 균등 분할 */
  .home-page .kpi-row {
    display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important;
    overflow: visible !important; border: 0 !important; background: transparent !important; margin: 10px 0 !important;
  }
  .home-page .kpi-row .kpi-card {
    flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center;
    gap: 3px !important; padding: 10px 4px !important; border: 1px solid var(--gray-2) !important; border-radius: 12px !important; background: #fff;
  }
  .home-page .kpi-row .kpi-card span { font-size: 11px !important; white-space: nowrap; }
  .home-page .kpi-row .kpi-card strong { font-size: 14px !important; white-space: normal !important; word-break: keep-all; overflow-wrap: anywhere; }

  /* ① 마이페이지 정보 목록 — 라벨 왼쪽·값 오른쪽 행 */
  .mypage-detail-list { grid-template-columns: 112px minmax(0, 1fr); border: 0; }
  .mypage-detail-list dt, .mypage-detail-list dd { padding: 10px 14px; border: 0; border-bottom: 1px solid #edf1f6; background: none; line-height: 1.45; }
  .mypage-detail-list dt { color: var(--gray-3); font-size: 13px; font-weight: 500; }
  .mypage-detail-list dd { color: var(--navy); font-size: 14px; font-weight: 600; text-align: right; }
  .mypage-detail-list dd.mypage-detail-wide { grid-column: 2 / -1; }
  .mypage-detail-section { border: 0 !important; padding: 8px 14px !important; background: var(--gray-1) !important; font-size: 12px; }

  /* 조회 조건 줄 — 종류는 한 줄 전체, 날짜 둘은 나란히 */
  .filter-grid { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .filter-grid > label:first-child { grid-column: 1 / -1; }
  .filter-grid select, .filter-grid input { width: 100% !important; height: 44px; }

  /* 체크박스 22px, 동의 라벨은 줄바꿈 없음 */
  .app-main input[type=checkbox], .page-grid input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--red); flex-shrink: 0; }
  .term-agree, .terms-all-check { white-space: nowrap; flex-shrink: 0; gap: 8px; }
  .term-agree, .terms-all-check { display: inline-flex !important; flex-direction: row !important; align-items: center !important; width: auto !important; }
  .term-agree input, .terms-all-check input { width: 22px !important; height: 22px !important; flex: 0 0 22px; margin: 0; padding: 0; }
  .term-card-head .btn-ghost, .term-card-head button { min-height: 36px; padding: 0 12px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  /* ⑤ 점검 체크리스트 — 체크박스 22px, 라벨 위·메모 아래 전체 폭 */
  .app-main .check-row { flex-wrap: wrap; gap: 8px 12px; padding: 12px !important; margin-bottom: 8px; border: 1px solid var(--gray-2) !important; border-radius: 12px; background: #fff; }
  .app-main .check-row:last-child { border-bottom: 1px solid var(--gray-2) !important; }
  .app-main .check-row input[type=checkbox] { width: 22px !important; height: 22px !important; margin-top: 0 !important; accent-color: var(--red) !important; }
  .app-main .check-row-label { flex: 1 1 calc(100% - 40px) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.4; }
  .app-main .check-row .check-memo { flex: 1 1 100%; width: 100% !important; height: 44px !important; font-size: 15px !important; }
  .app-main .check-row:has(input[type=checkbox]:checked) { background: #f2faf5; border-color: #bfe3cc !important; }
}

/* 시작 준비 현황 등 "내용 + 이동 버튼" 행 (전 폭 공통) */
.ready-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--gray-2); }
.ready-row .ready-ico { width: 20px; text-align: center; font-weight: 700; flex-shrink: 0; }
.ready-row .ready-text { flex: 1; min-width: 0; font-size: 14px; }
.ready-row .ready-text small { display: block; color: var(--gray-3); font-size: 12px; margin-top: 2px; }
.ready-row .btn-ghost { width: 92px; flex-shrink: 0; }
/* ① 라벨-값 격자 (JS로 그리는 요약용, 전 폭 공통) */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 12px; margin: 0 0 12px; }
.kv-grid dt { font-size: 12px; color: var(--gray-3); margin-bottom: 3px; }
.kv-grid dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--navy); word-break: keep-all; overflow-wrap: anywhere; }
.kv-grid .kv-wide { grid-column: 1 / -1; }

/* 긴 문자열(URL 등)이 카드·페이지 폭을 밀어내지 않도록 — 전 폭 공통 */
.app-main { overflow-wrap: anywhere; }
.app-main .badge, .app-main .btn-primary, .app-main .btn-ghost, .app-main .btn-secondary, .app-main .btn-sm { overflow-wrap: normal; }

/* 폼 제출 결과·오류 안내 (예약 신청 등) */
.form-result { margin-top: 12px; font-size: 14px; line-height: 1.55; color: #b42318; white-space: pre-wrap; overflow-wrap: anywhere; }
.form-result:empty { display: none; }